Z-index 与堆叠上下文
使用 z-index 控制元素的前后层级，并理解堆叠上下文。
Z-index 与堆叠上下文 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
什么是 z-index？
z-index 控制已定位元素沿 Z 轴（从前到后）的层叠顺序。当元素重叠时，值较高的元素会显示在值较低的元素上方。
z-index 仅对已定位元素生效
z-index 对 position: static（默认值）的元素不起作用。必须使用 relative、absolute、fixed 或 sticky，z-index 才会生效。
<div class="popup">Popup (position + z-index)</div>
默认堆叠顺序
未明确设置 z-index 时，元素按以下顺序堆叠（从后到前）：
- 根元素背景
- 块级元素（按流中的顺序）
- 浮动元素
- 行内元素
- z-index 为 auto 或 0 的已定位元素
堆叠上下文
堆叠上下文是具有共同 z 轴的一层元素。z-index 值只会在同一个堆叠上下文中相互比较。堆叠上下文中的元素无法置于其外部元素之上，无论 z-index 值是多少。
什么会创建堆叠上下文
以下情况会创建新的堆叠上下文：
position+ 不为 auto 的z-indexopacity小于 1- 应用了
transform、filter或perspective - 对特定属性设置了
will-change isolation: isolate- 带有 z-index 的 Flex/网格子项
堆叠上下文隔离
使用 isolation: isolate 可以有意创建堆叠上下文，且不会产生任何视觉副作用。这对于需要包含自身 z-index 层的 UI 组件很有用。
<div class="modal-wrapper">Isolated stacking context</div>
z-index 层级尺度问题
项目经常会陷入“z-index 大战”：开发者不断把值提高到 9999 或 99999 来相互竞争。可以使用 CSS 变量定义命名的 z-index 层级尺度来解决这个问题：
<p>Custom properties define a z-index scale used across the app.</p>
负 z-index
负 z-index 值会将元素置于包含块背景的后面。这可用于将装饰性伪元素层放在内容后面。
<div class="card">Card with a decorative gradient layer behind it</div>
调试堆叠问题
当模态框或工具提示显示在另一个元素后面时，罪魁祸首通常是祖先元素上的低 z-index 堆叠上下文。请使用 DevTools 的三维视图，或检查父元素上的不透明度、变换和滤镜。
Flex 和网格中的 z-index
Flex 项目和网格项目无需明确设置 position，就可以直接使用 z-index。浏览器在进行堆叠处理时会将它们视为已定位元素。
<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>
固定定位模态框与 z-index
模态框应作为 <body> 的直接子元素（或顶层包装器），以脱离祖先堆叠上下文。HTML <dialog> 元素会在浏览器的顶层中原生处理这一点。
快速检查
两个重叠元素分别位于不同的父级堆叠上下文中，且都设置了 z-index: 100。什么因素决定哪一个显示在上层？
回顾
z-index 控制已定位元素的前后堆叠顺序。堆叠上下文会隔离 z-index 之间的比较。父元素上任何会创建堆叠上下文的设置，都可能限制子元素的 z-index 值。请使用 isolation: isolate 创建明确的边界，并使用 CSS 变量定义 z-index 层级尺度。
用 AI 导师学习 CSS — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「Z-index 与堆叠上下文」课时是免费的吗？
是的 — 「Z-index 与堆叠上下文」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「Z-index 与堆叠上下文」这节课中我会学到什么？
使用 z-index 控制元素的前后层级，并理解堆叠上下文。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「Z-index 与堆叠上下文」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。