前端进阶 课程二十四、：CSS核心进阶三 定位（position）进阶与z-index

--静态定位/相对定位/绝对定位/固定定位/粘性定位/层叠等级

全面掌握position的static、relative、absolute、fixed四大值及sticky粘性定位的特性与应用场景，理解"Parent is relative, child is absolute"定位逻辑和fixed的viewport定位规则。深入剖析z-index的层级计算规则与层级上下文，解决元素层级冲突核心问题。通过实操实现相对定位微调、绝对定位弹窗、固定导航、粘性导航等案例，搭配弹窗、层级布局等作业，让学员能精准运用定位实现各类布局，熟练管理元素层级，攻克定位与层级的核心难点。

关键词：

Parent is relative：父元素采用相对定位（position: relative），它仍然保留在正常的文档流中，占据原有空间，不影响兄弟元素布局。

视口: 就是浏览器中用来显示网页内容的 "可视区域"------ 你可以把它想象成电脑 / 手机屏幕上能看到网页的那一块 "窗口"，网页的布局、尺寸都会基于这个区域来计算，分为布局、视觉、理想视口三类。

脱流：（脱离文档流） 指元素打破了浏览器默认的文档流规则，不再占据原本的 "专属空间"：脱流元素会 "跳出" 正常排队的队伍，原位置会被后续元素直接填充；脱流元素的位置不再受文档流约束，可自由调整（如浮动、定位），甚至能和其他元素重叠；其他元素布局时，会 "无视" 这个脱流元素的存在（仅文档流层面，视觉上仍能看到）。

粘性定位（position: sticky）：实现网页 "吸顶导航栏""侧边栏吸边" 等常见交互效果的核心，元素先跟着页面正常滚动，直到滚到设定的位置，就'粘住'不动，等父元素滚完了，再跟着父元素一起滚动。

一、学习目标

1. 彻底理解position的4个值（static/relative/absolute/fixed）的区别和应用场景；

2. 掌握absolute和fixed的定位逻辑（包含块、偏移量计算）；

3. 理解z-index的作用、计算规则，解决元素层级冲突问题；

4. 掌握sticky定位的用法（粘性导航常用）。

二、核心知识点（含实操）

1. position各属性值详解（重点实操）

• static（默认值）：无定位，元素遵循正常文档流，top/right/bottom/left/z-index无效；

• relative（相对定位）：

• 元素不脱离正常文档流，保留自身在文档流中的位置；

• 通过top/right/bottom/left设置偏移量，相对于自身原来的位置定位；

• 应用场景：作为absolute定位的包含块（Parent is relative, child is absolute）、微调元素位置。

• absolute（绝对定位）：

• 元素脱离正常文档流，不保留自身在文档流中的位置（后续元素会占据其位置）；

• 定位基准（包含块）：找最近的、已定位（position≠static）的祖先元素（relative/absolute/fixed），如果没有，则相对于根元素（html）定位；

• 偏移量（top/right/bottom/left）：相对于包含块计算，可设置auto；

• 应用场景：弹窗、下拉菜单、元素悬浮、精准定位（如图标在按钮右上角）。

• fixed（固定定位）：

• 元素脱离正常文档流，不保留自身位置；

• 定位基准：始终相对于浏览器窗口（viewport）定位，滚动页面时，元素位置固定不变；

• 注意点：fixed元素会被transform属性影响（定位基准变为被transform修饰的祖先元素）；

• 应用场景：固定导航栏、回到顶部按钮、弹窗遮罩层。

• sticky（粘性定位）：

• 元素在滚动到指定偏移量前，遵循正常文档流；滚动到指定偏移量后，变为fixed定位，相对于包含块固定；

• 生效条件：必须设置top/right/bottom/left中的至少一个，且父元素不能有overflow: hidden/auto/scroll（否则无效）；

• 应用场景：粘性导航栏（滚动时固定在顶部）、列表标题悬浮。

• 实操练习：分别实现relative微调元素、absolute定位弹窗、fixed固定导航、sticky粘性导航4个案例，验证各定位的效果和特性。

2. z-index层级管理（核心难点）

• 定义：z-index用于控制定位元素（position≠static）的层级顺序，值越大，元素越靠上（优先级越高）。
• z-index的计算规则：

• z-index仅对定位元素生效（static元素设置无效）；

• 同一包含块内，z-index值越大，元素层级越高；值相同，后定义的元素覆盖先定义的；

• 层级上下文：每个定位元素（z-index≠auto）会创建一个新的层级上下文，子元素的z-index仅在当前层级上下文内生效，无法突破父元素的层级；

• 易错点：父元素z-index较低，即使子元素z-index很高，也无法覆盖父元素同级的、z-index较高的元素。

• 实操练习：编写一个包含多个定位元素的页面，制造层级冲突，通过调整z-index和层级上下文，解决冲突。

三、 CSS 定位与 Z-index 演示 程序程说明

以下程序展示CSS定位（static/relative/absolute/fixed/sticky）和z-index的HTML代码，清晰演示代码运行过程、解读背后的核心知识点，以及展示执行结果所表达的定位/层级逻辑。

配套代码

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>定位与z-index演示</title> <style> /* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 保留body滚动，但重点是给sticky后加实际内容 */ body { line-height: 1.8; font-size: 16px; color: #333; } /* 1. Parent is relative, child is absolute演示 */ .parent { position: relative; /* 父元素设relative，作为absolute的参考系 */ width: 300px; height: 200px; background: #f5f5f5; margin: 20px; border: 1px solid #ddd; /* 新增边框，更易识别父容器 */ } .absolute { position: absolute; /* child is absolute：绝对定位 */ top: 20px; left: 20px; background: #f44336; color: #fff; padding: 10px; border-radius: 4px; /* 新增圆角，视觉更友好 */ } /* 2. fixed固定定位：绑定视口，不随滚动移动 */ .fixed { position: fixed; top: 20px; right: 20px; background: #4caf50; color: #fff; padding: 10px 20px; border-radius: 4px; z-index: 99; /* 避免被sticky覆盖 */ } /* 3. z-index层级演示：仅对非static定位生效 */ .z1 { z-index: 1; position: relative; /* 必须设定位，z-index才生效 */ background: #ffeb3b; width: 100px; height: 100px; margin: 20px; border-radius: 4px; } .z2 { z-index: 2; /* 数值更大，层级更高 */ position: relative; background: #2196f3; width: 100px; height: 100px; margin-top: -50px; /* 让两个块重叠 */ margin-left: 70px; border-radius: 4px; color: #fff; /* 新增文字颜色，方便看内容 */ } /* 4. sticky粘性定位演示（重点优化） */ .sticky { position: sticky; /* 粘性定位：滚动到top:0时固定 */ top: 0; /* 触发固定的偏移值（关键） */ background: #9c27b0; color: #fff; padding: 15px 20px; /* 增大内边距，更显眼 */ width: 100%; margin: 20px 0; /* 调整外边距，避免和其他元素重叠 */ box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 新增阴影，固定时更易识别 */ z-index: 98; /* 层级低于fixed，但高于普通元素 */ } /* 新增：占位内容，让页面有足够滚动高度 */ .content-block { margin: 20px; padding: 20px; background: #f9f9f9; border: 1px solid #eee; } </style> </head> <body> <!-- Parent is relative, child is absolute演示 --> <div class="parent"> Parent is relative, child is absolute演示（父relative，子absolute） <div class="absolute">绝对定位</div> </div> <!-- fixed固定定位 --> <div class="fixed">固定定位（跟随视口）</div> <!-- z-index层级演示 --> <div class="z1">z-index=1</div> <div class="z2">z-index=2（层级更高）</div> <!-- sticky粘性定位（关键：后面加大量内容） --> <div class="sticky">✅ 粘性导航（滚动页面看效果：滚动时会粘在顶部）</div> <!-- 新增：大量占位内容，确保页面滚动高度足够 --> <div class="content-block"> <h3>占位内容1</h3> <p>测试滚动效果：当你向下滚动页面时，上方的紫色"粘性导航"会从正常文档流状态，变成固定在视口顶部的状态；当滚动回顶部时，又会恢复到原位置。</p> </div> <div class="content-block"> <h3>占位内容2</h3> <p>这是第二块占位内容，目的是让页面有足够的滚动空间，触发sticky的固定效果。</p> </div> <div class="content-block"> <h3>占位内容3</h3> <p>继续滚动页面，观察紫色导航栏的位置变化------它会一直粘在顶部，直到滚动到页面底部。</p> </div> <div class="content-block"> <h3>占位内容4</h3> <p>sticky的核心是"粘性"：在正常文档流中是relative，滚动到指定偏移（top:0）时变成fixed。</p> </div> <div class="content-block"> <h3>占位内容5</h3> <p>再往下滚动，验证效果是否持续生效...</p> </div> <div class="content-block"> <h3>占位内容6</h3> <p>足够多的内容才能让sticky效果清晰展示，这是原代码缺失的关键。</p> </div> <div class="content-block"> <h3>占位内容7</h3> <p>滚动到这里，粘性导航依然固定在顶部，直到页面滚动到底部。</p> </div> </body> </html> |

CSS定位（position）进阶与z-index

图示：演示视频

1. 介绍

大家好，今天通过一段实战代码，彻底搞懂CSS中最核心的定位属性------position的5个取值（static/relative/absolute/fixed/sticky），以及z-index层级上下文的计算规则。我们会从代码解析到效果演示，再到实战案例，把'Parent is relative, child is absolute'、固定定位的视口规则、层级冲突解决这些核心问题讲透。

2. 代码基础解析

• HTML部分很简单，分4个模块：父容器+绝对定位子元素、固定定位元素、两个z-index层级元素；

• CSS部分是核心：

① .parent设置了position: relative（Parent is relative），宽300px、高200px，背景浅灰；

② .absolute是绝对定位（child is absolute），top/left各20px，红色背景；

③ .fixed是固定定位，top/right各20px，绿色背景；

④ .z1/.z2都是相对定位，z-index分别为1和2，通过margin让它们重叠，黄色/蓝色背景。

接下来我们逐一讲解效果，拆解每个定位属性的特性。

3. 核心定位属性知识点讲解

3.1 先讲position默认值：static（静态定位）

• 临时修改代码：给.parent加position: static（默认值），刷新页面

• 标注：静态定位元素遵循正常文档流，top/left/z-index等属性无效

position的默认值是static（静态定位），这是所有元素的初始状态------元素遵循正常的文档流，此时设置top、left、z-index这些属性都是无效的。比如我们给父容器设static，它还是按文档流排列，没有任何定位偏移。

3.2 relative（相对定位）："原地偏移，不脱流"

• 恢复.parent的position: relative，单独演示.z1的relative效果：

• 先删除.z1的position: relative，看黄色块的初始位置；

• 加上position: relative，保留margin，说明"相对自己原来的位置偏移，且不脱离文档流（后面的.z2仍会被它占据的位置影响）"。

relative是相对定位，核心特性：① 相对于自己原本在文档流中的位置偏移；② 不脱离文档流（原来的位置仍会被占据，不会让后面的元素补位）；③ 常用来做'微调元素位置'，或作为absolute的父容器（因为absolute需要找最近的已定位祖先元素）。

3.3 absolute（绝对定位）：" Parent is relative, child is absolute**，脱流定位"**

• 第一步：保留.parent的position: relative，展示红色块（.absolute）在父容器内top/left 20px的位置；

• 第二步：删除.parent的position: relative，刷新页面，红色块会跑到浏览器视口的top/left 20px位置（因为找不到已定位的父元素，就相对于根元素html定位）；

• 标注：absolute"脱离文档流"，父容器无定位则相对视口，有定位则相对父容器。

absolute是绝对定位，核心规则就是'Parent is relative, child is absolute'：

1. 绝对定位元素完全脱离文档流（原来的位置会被后面的元素补位）；
2. 它的定位参考系是「最近的、设置了非static定位的祖先元素」（通常给父元素设relative）；
3. 如果没有这样的父元素，就相对于浏览器的视口（viewport）定位；
4. 应用场景：弹窗、悬浮提示、自定义位置的元素（比如商品卡片的角标）。

3.4 fixed（固定定位）："视口绑定，永不跟随滚动"

• 操作：在页面中增加足够多的空白内容（比如加<br>标签让页面能滚动），然后滚动鼠标滚轮；

• 观察：绿色的.fixed块始终停留在浏览器右上角（top 20px、right 20px），不会随页面滚动而移动。

fixed是固定定位，核心特性：

1. 完全脱离文档流；
2. 定位参考系永远是浏览器的视口（viewport），和父元素无关；
3. 页面滚动时，fixed元素的位置不会改变；
4. 应用场景：固定导航栏、回到顶部按钮、悬浮客服窗口。

3.5 sticky（粘性定位）："relative+fixed的结合体"

• 临时添加sticky演示代码（在现有代码后加）：

|---------------------------------------------------------------------------------------------------------|
| CSS .sticky { position: sticky; top: 0; background: #9c27b0; color: #fff; padding: 10px; width: 100%; } |

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!-- 在body中添加 --> <div style="height: 1000px;"> <!-- 让页面可滚动 --> <div class="sticky">粘性导航（滚动时粘在顶部）</div> <p>滚动页面看效果...</p> <!-- 重复p标签增加高度 --> </div> |

• 操作：滚动页面，演示sticky元素"滚动到top:0位置时，从relative变成fixed，粘在视口顶部"。

sticky是粘性定位，相当于relative和fixed的结合：

1. 元素在正常文档流中时，表现和relative一样；
2. 当页面滚动到元素到达指定偏移位置（比如top:0），它会变成fixed定位，粘在视口上；
3. 应用场景：粘性导航栏、表格的表头固定、侧边栏分类导航。

4. z-index层级规则深度解析

• 聚焦.z1和.z2的重叠区域：蓝色块（z-index=2）覆盖在黄色块（z-index=1）上方；

• 操作1：删除.z1和.z2的position: relative，刷新页面------z-index失效，黄色块会覆盖蓝色块（因为文档流中后面的元素默认层级更高）；

• 操作2：给.z1设z-index=999，.z2设z-index=2------黄色块覆盖蓝色块，验证"数值越大层级越高"；
• 操作3：新增"层级上下文"演示：给.parent加z-index:0，然后在.parent内加一个z-index=999的元素，发现它不会覆盖外部的.z2（因为层级上下文隔离）。

"z-index用来解决元素重叠时的层级冲突，核心规则：

• z-index仅对设置了非static定位的元素生效（比如relative/absolute/fixed/sticky）；

• 数值越大，层级越高（默认auto，等价于0）；

• 层级上下文：每个设置了定位+z-index的元素，会形成一个独立的层级上下文，内部元素的z-index只在这个上下文内有效，无法突破到外部；

• 解决层级冲突的核心：确保目标元素在正确的层级上下文中，且z-index数值足够大。"

5. 实战案例拓展

• 快速演示3个实战案例的核心代码片段（无需完整实现，重点讲思路）：

• 相对定位微调：按钮内的图标位置微调（position: relative; top: 2px;）；

• 绝对定位弹窗：弹窗居中（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);）；

• 粘性导航：页面滚动时导航粘在顶部（就是我们刚才演示的sticky代码）。

"结合今天的知识点，我们可以实现这些高频实战场景：

• 相对定位微调：比如按钮里的图标和文字不对齐，用relative+top/left微调，不影响其他元素；

• 绝对定位弹窗：弹窗需要脱离文档流，且相对于父容器居中，用'Parent is relative, child is absolute+transform'实现；

• 粘性导航：页面滚动时导航栏粘在顶部，提升用户体验，用sticky+top:0即可实现。"

6. 核心知识点总结

最后我们回顾今天的核心知识点，记住这几点就能搞定定位和层级问题：

• 定位属性：static（默认）、relative（原地偏移不脱流）、absolute（Parent is relative, child is absolute脱流）、fixed（绑定视口）、sticky（粘性定位）；

• Parent is relative, child is absolute：absolute的定位参考系是最近的非static父元素；

• z-index：仅对非static元素生效，数值越大层级越高，层级上下文会隔离内部元素。

小 结

• 定位核心规则：static（默认不偏移）、relative（原地偏移不脱流）、absolute（Parent is relative, child is absolute脱流）、fixed（绑定视口）、sticky（滚动到指定位置固定）；

• z-index关键：仅对非static定位元素生效，数值越大层级越高，层级上下文会隔离内部元素；

• 实战应用：relative做微调、absolute做弹窗、fixed做固定导航、sticky做粘性导航，是前端定位布局的核心用法。

三、当日作业（40分钟）

1. 实现一个弹窗效果：点击按钮弹出弹窗，弹窗居中显示（用absolute定位），弹窗有遮罩层（fixed定位，覆盖整个窗口），点击遮罩层关闭弹窗；

2. 实现一个粘性导航栏：页面滚动时，导航栏在顶部固定，滚动到顶部时，恢复正常文档流位置；

3. 编写一个包含3个层级的布局（父元素1、子元素1、父元素2），调整z-index，实现子元素1覆盖父元素2，父元素1不覆盖父元素2，提交层级分析笔记。