freeCodeCamp 响应式网页设计实战用 z-index 属性控制重叠元素的堆叠顺序【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp在 freeCodeCamp 的 Responsive Web Design 课程中z-index是「Applied Visual Design」板块定位系列练习relative → absolute → fixed → float → z-index → margin 居中的收官知识点。本篇基于课程中的原始挑战文档完整还原「Change the Position of Overlapping Elements with the z-index Property」这一练习的教学目标、起始代码与验收断言并结合课程源码中的前后置挑战讲清z-index的取值规则、生效条件及其在真实页面布局弹窗、导航条、图层卡片中的作用读完即可掌握用positionz-index精确控制元素叠放顺序的完整方法。z-index 解决什么问题默认堆叠顺序课程原文z-index 挑战文档对该问题的定义是当元素被定位成相互重叠时即使用了position: absolute | relative | fixed | sticky默认情况下 HTML 标记中靠后出现的元素会显示在其他元素之上。但z-index属性可以指定元素在堆叠中的顺序。它的值必须是整数whole number不能是小数z-index值更高的元素会叠放在值更低的元素之上。也就是说CSS 的默认行为是「后写者覆盖先写者」。这个默认规则有两个局限顺序被 HTML 结构绑死想调整层级就必须调整 DOM 顺序而 DOM 顺序还承担语义与无障碍屏幕阅读器按标记顺序朗读职责不能随意调换层级无法表达「优先级」导航条要永远压在正文之上、弹窗要压住导航条用「谁写后面谁在上」来表达会非常脆弱。z-index就是为打破这种绑定而设计的它把「叠放顺序」从「DOM 顺序」中解耦出来变成一个显式的、可调的数值维度。挑战任务与完整代码挑战的指令instructions是给类名为first红色矩形的元素添加z-index属性并设为 2让它覆盖另一个元素蓝色矩形。课程的种子代码seed即练习开始时编辑器里的初始状态完整如下style div { width: 60%; height: 200px; margin-top: 20px; } .first { background-color: red; position: absolute; } .second { background-color: blue; position: absolute; left: 40px; top: 50px; z-index: 1; } /style div classfirst/div div classsecond/div观察这份种子代码可以发现三个教学意图两个div都声明了position: absolute因此脱离普通流并相互重叠——这是z-index能产生视觉差异的前提.second蓝矩形已预设z-index: 1相当于先给下层定好基准值.first红矩形的样式块末尾刻意留了一行空位提示学员「在这里补上缺失的规则」。标准解法solutions只改了一处——给.first补上z-index: 2style div { width: 60%; height: 200px; margin-top: 20px; } .first { background-color: red; position: absolute; z-index: 2; } .second { background-color: blue; position: absolute; left: 40px; top: 50px; z-index: 1; } /style div classfirst/div div classsecond/div效果对比未修改前.second在 HTML 中排在.first之后按默认规则蓝矩形压在红矩形上修改后.first的z-index: 2大于.second的z-index: 1红矩形反压回来覆盖蓝矩形。验收断言如何验证课程对这类挑战的判定代码写在文档的--hints--段核心是用浏览器计算样式做精确断言const firstElement document.querySelector(.first); const firstStyle window.getComputedStyle(firstElement); assert.equal(firstStyle?.zIndex, 2);从断言细节可以看出两个实现事实检查的是getComputedStyle的计算值而非源码文本说明判定与书写格式无关只关心最终生效的样式断言右侧是字符串2而非数字2。这符合 CSSOM 的行为——getComputedStyle返回的样式值统一是字符串z-index作为整数在计算样式中呈现为无单位数字字符串2。z-index 的两个硬性规则从源码与前后挑战印证规则一只对定位元素生效原文档明确列出z-index的适用前提元素必须是position: absolute | relative | fixed | sticky之一。这一点在课程定位系列的前置挑战里都有对应铺垫Change an Elements Relative Position 讲解position: relative配合top/bottom/left/right偏移并强调「relative 不会把元素移出普通流」Lock an Element to its Parent with Absolute Positioning 讲解position: absolute会「移除元素脱离普通流removes the element from the normal flow」并说明它会锚定到最近的定位祖先通常是给父级加上position: relative本 z-index 挑战的种子代码正是把absolute用到了两个矩形上。因此可以这样理解整条知识链position决定元素是否进入堆叠参与竞争z-index决定竞争名次。对position: static默认值的普通流元素写z-index是无效的——这是新手最常踩的坑也是课程把本练习安排在四种position取值讲完之后float 之后、margin 居中之前的原因。从 Applied Visual Design 板块结构 可以看到本挑战在challengeOrder中的位置它紧接Push Elements Left or Right with the float Property之后、Center an Element Horizontally Using the margin Property之前属于定位主题relative → absolute → fixed → float → z-index的收尾。规则二值必须是整数原文强调 It must be an integer (i.e. a whole number and not a decimal)。取值要点特性说明允许的值任意整数正数、负数、0不允许的值小数如1.5、单位如2px、百分比默认值未定位元素为auto定位元素按 DOM 顺序参与堆叠比较方式数值大者在上面与选择器优先级specificity无关负值用途把定位元素压到同层其他元素之后常用来做底层装饰需要补充一个课程文档没有直接展开、但从源码结构可以合理推断的工程要点z-index只在同一个**堆叠上下文stacking context**内比较。当某个定位元素自身设置了非auto的z-index或 opacity、transform 等会创建新上下文的属性时它的后代元素的z-index只在「自家」上下文内有效对外只表现为该上下文整体的名次。这解释了为什么有时给子元素调z-index却「顶不过」兄弟元素——实际要调的是父级上下文。实战延伸z-index 的典型应用场景结合课程中其他挑战的形态z-index在日常开发中最常见的三类用法是固定导航条/工具条给position: fixed的 header 一个较高值如z-index: 1000保证滚动内容永远在其下方弹窗与遮罩遮罩层用z-index: 100弹窗本体用z-index: 101弹窗内的关闭按钮再高一层卡片/标签角标让角标、徽章badge压在卡片内容之上或让某张卡片作为「置顶」样式突出显示。工程上常见的做法是建立层级阶梯z-index scale例如把布局类元素限定在 1–99、UI 层在 100–999、模态层在 1000避免随手写z-index: 9999造成全局混乱。这不属于本课程的断言范围但属于该知识点落地时的通行约定。在课程中的位置与学习路径本挑战隶属 Responsive Web Design 证书下的 Applied Visual Design 板块。从 responsive-web-design.json 可见该 superblock 的板块顺序为basic-html-and-html5→basic-css→applied-visual-design→applied-accessibility→responsive-web-design-principles→css-flexbox→css-grid。也就是说z-index所学的position/float定位属于传统布局手段课程在后续 Flexbox 与 Grid 板块中会给出更现代的布局方案理解z-index的价值在于它是贯穿所有布局模式包括 Flex 与 Grid的通用层级工具。本章后续可顺学的相关练习Center an Element Horizontally Using the margin Property用margin: auto水平居中是定位主题的最后一块拼图Push Elements Left or Right with the float Property本挑战的直接前置理解float如何把元素移出普通流是理解为何浮动元素也需要z-index参与叠放的基础。小结z-index只在元素为absolute / relative / fixed / sticky定位时生效用于显式指定叠放名次它必须取整数值越大越靠上未设置时按 DOM 顺序「后写者在上」课程练习的验收方式是getComputedStyle(el).zIndex与字符串2相等关注的是计算后的最终值实际工程中建议按「布局 工具栏 弹窗」的思路规划 z-index 阶梯并注意堆叠上下文对子元素层级的限制。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
freeCodeCamp 响应式网页设计实战：用 z-index 属性控制重叠元素的堆叠顺序
freeCodeCamp 响应式网页设计实战用 z-index 属性控制重叠元素的堆叠顺序【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp在 freeCodeCamp 的 Responsive Web Design 课程中z-index是「Applied Visual Design」板块定位系列练习relative → absolute → fixed → float → z-index → margin 居中的收官知识点。本篇基于课程中的原始挑战文档完整还原「Change the Position of Overlapping Elements with the z-index Property」这一练习的教学目标、起始代码与验收断言并结合课程源码中的前后置挑战讲清z-index的取值规则、生效条件及其在真实页面布局弹窗、导航条、图层卡片中的作用读完即可掌握用positionz-index精确控制元素叠放顺序的完整方法。z-index 解决什么问题默认堆叠顺序课程原文z-index 挑战文档对该问题的定义是当元素被定位成相互重叠时即使用了position: absolute | relative | fixed | sticky默认情况下 HTML 标记中靠后出现的元素会显示在其他元素之上。但z-index属性可以指定元素在堆叠中的顺序。它的值必须是整数whole number不能是小数z-index值更高的元素会叠放在值更低的元素之上。也就是说CSS 的默认行为是「后写者覆盖先写者」。这个默认规则有两个局限顺序被 HTML 结构绑死想调整层级就必须调整 DOM 顺序而 DOM 顺序还承担语义与无障碍屏幕阅读器按标记顺序朗读职责不能随意调换层级无法表达「优先级」导航条要永远压在正文之上、弹窗要压住导航条用「谁写后面谁在上」来表达会非常脆弱。z-index就是为打破这种绑定而设计的它把「叠放顺序」从「DOM 顺序」中解耦出来变成一个显式的、可调的数值维度。挑战任务与完整代码挑战的指令instructions是给类名为first红色矩形的元素添加z-index属性并设为 2让它覆盖另一个元素蓝色矩形。课程的种子代码seed即练习开始时编辑器里的初始状态完整如下style div { width: 60%; height: 200px; margin-top: 20px; } .first { background-color: red; position: absolute; } .second { background-color: blue; position: absolute; left: 40px; top: 50px; z-index: 1; } /style div classfirst/div div classsecond/div观察这份种子代码可以发现三个教学意图两个div都声明了position: absolute因此脱离普通流并相互重叠——这是z-index能产生视觉差异的前提.second蓝矩形已预设z-index: 1相当于先给下层定好基准值.first红矩形的样式块末尾刻意留了一行空位提示学员「在这里补上缺失的规则」。标准解法solutions只改了一处——给.first补上z-index: 2style div { width: 60%; height: 200px; margin-top: 20px; } .first { background-color: red; position: absolute; z-index: 2; } .second { background-color: blue; position: absolute; left: 40px; top: 50px; z-index: 1; } /style div classfirst/div div classsecond/div效果对比未修改前.second在 HTML 中排在.first之后按默认规则蓝矩形压在红矩形上修改后.first的z-index: 2大于.second的z-index: 1红矩形反压回来覆盖蓝矩形。验收断言如何验证课程对这类挑战的判定代码写在文档的--hints--段核心是用浏览器计算样式做精确断言const firstElement document.querySelector(.first); const firstStyle window.getComputedStyle(firstElement); assert.equal(firstStyle?.zIndex, 2);从断言细节可以看出两个实现事实检查的是getComputedStyle的计算值而非源码文本说明判定与书写格式无关只关心最终生效的样式断言右侧是字符串2而非数字2。这符合 CSSOM 的行为——getComputedStyle返回的样式值统一是字符串z-index作为整数在计算样式中呈现为无单位数字字符串2。z-index 的两个硬性规则从源码与前后挑战印证规则一只对定位元素生效原文档明确列出z-index的适用前提元素必须是position: absolute | relative | fixed | sticky之一。这一点在课程定位系列的前置挑战里都有对应铺垫Change an Elements Relative Position 讲解position: relative配合top/bottom/left/right偏移并强调「relative 不会把元素移出普通流」Lock an Element to its Parent with Absolute Positioning 讲解position: absolute会「移除元素脱离普通流removes the element from the normal flow」并说明它会锚定到最近的定位祖先通常是给父级加上position: relative本 z-index 挑战的种子代码正是把absolute用到了两个矩形上。因此可以这样理解整条知识链position决定元素是否进入堆叠参与竞争z-index决定竞争名次。对position: static默认值的普通流元素写z-index是无效的——这是新手最常踩的坑也是课程把本练习安排在四种position取值讲完之后float 之后、margin 居中之前的原因。从 Applied Visual Design 板块结构 可以看到本挑战在challengeOrder中的位置它紧接Push Elements Left or Right with the float Property之后、Center an Element Horizontally Using the margin Property之前属于定位主题relative → absolute → fixed → float → z-index的收尾。规则二值必须是整数原文强调 It must be an integer (i.e. a whole number and not a decimal)。取值要点特性说明允许的值任意整数正数、负数、0不允许的值小数如1.5、单位如2px、百分比默认值未定位元素为auto定位元素按 DOM 顺序参与堆叠比较方式数值大者在上面与选择器优先级specificity无关负值用途把定位元素压到同层其他元素之后常用来做底层装饰需要补充一个课程文档没有直接展开、但从源码结构可以合理推断的工程要点z-index只在同一个**堆叠上下文stacking context**内比较。当某个定位元素自身设置了非auto的z-index或 opacity、transform 等会创建新上下文的属性时它的后代元素的z-index只在「自家」上下文内有效对外只表现为该上下文整体的名次。这解释了为什么有时给子元素调z-index却「顶不过」兄弟元素——实际要调的是父级上下文。实战延伸z-index 的典型应用场景结合课程中其他挑战的形态z-index在日常开发中最常见的三类用法是固定导航条/工具条给position: fixed的 header 一个较高值如z-index: 1000保证滚动内容永远在其下方弹窗与遮罩遮罩层用z-index: 100弹窗本体用z-index: 101弹窗内的关闭按钮再高一层卡片/标签角标让角标、徽章badge压在卡片内容之上或让某张卡片作为「置顶」样式突出显示。工程上常见的做法是建立层级阶梯z-index scale例如把布局类元素限定在 1–99、UI 层在 100–999、模态层在 1000避免随手写z-index: 9999造成全局混乱。这不属于本课程的断言范围但属于该知识点落地时的通行约定。在课程中的位置与学习路径本挑战隶属 Responsive Web Design 证书下的 Applied Visual Design 板块。从 responsive-web-design.json 可见该 superblock 的板块顺序为basic-html-and-html5→basic-css→applied-visual-design→applied-accessibility→responsive-web-design-principles→css-flexbox→css-grid。也就是说z-index所学的position/float定位属于传统布局手段课程在后续 Flexbox 与 Grid 板块中会给出更现代的布局方案理解z-index的价值在于它是贯穿所有布局模式包括 Flex 与 Grid的通用层级工具。本章后续可顺学的相关练习Center an Element Horizontally Using the margin Property用margin: auto水平居中是定位主题的最后一块拼图Push Elements Left or Right with the float Property本挑战的直接前置理解float如何把元素移出普通流是理解为何浮动元素也需要z-index参与叠放的基础。小结z-index只在元素为absolute / relative / fixed / sticky定位时生效用于显式指定叠放名次它必须取整数值越大越靠上未设置时按 DOM 顺序「后写者在上」课程练习的验收方式是getComputedStyle(el).zIndex与字符串2相等关注的是计算后的最终值实际工程中建议按「布局 工具栏 弹窗」的思路规划 z-index 阶梯并注意堆叠上下文对子元素层级的限制。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考