z-index和堆叠上下文共同决定CSS层叠顺序，定位元素的z-index值仅在所属堆叠上下文中生效，父级创建新堆叠上下文时子元素无法超越其层级，需通过开发者工具排查并合理管理z-index变量以解决遮挡问题。
在CSS布局中，元素的层级显示是一个常见且关键的问题。当多个元素在页面上重叠时，如何控制哪个元素显示在上方、哪个在下方？这就涉及 z-index 属性和堆叠上下文（Stacking Context） 的概念。理解它们的工作机制，是精准控制页面视觉层级的基础。
z-index 的基本作用
z-index 用于设置定位元素（position 不为 static）在 Z 轴上的堆叠顺序。数值越大，元素越靠前显示。
使用 z-index 需要注意以下几点：
- 只对定位元素有效（即 position: relative、absolute、fixed 或 sticky）
- 可以取整数（正、负、0），默认值为 auto，等价于 0（在当前堆叠上下文中）
- 单纯设置高 z-index 并不总能“置顶”，因为它受限于父级是否创建了新的堆叠上下文
堆叠上下文：决定层级的“容器”
堆叠上下文是一个独立的层级环境。一旦某个元素创建了新的堆叠上下文，其子元素的 z-index 只能在该上下文内部比较，无法与外部元素直接竞争层级。
立即学习“前端免费学习笔记（深入）”；
以下情况会触发新堆叠上下文的创建：
- 根元素（）自动形成根堆叠上下文
- position 为 fixed 或 sticky 的元素（在支持的浏览器中）
- z-index 为数值（非 auto）的定位元素
- opacity 小于 1
- transform 不为 none
- filter 不为 none
- will-change 设置为触发层叠属性（如 transform、opacity）
- mix-blend-mode 不为 normal
- 某些 CSS 3D 属性或 isolation: isolate 等
这意味着，即使一个子元素设置了 z-index: 9999，如果它的父元素创建了堆叠上下文且整体层级较低，它仍然可能被外部 z-index 较小但处于更高堆叠上下文中的元素覆盖。
堆叠顺序的计算规则
浏览器按照特定顺序渲染元素，从后往前绘制。同一堆叠上下文内的元素遵循如下优先级（由下到上）：
- 背景和边框：本层元素的背景、边框
- 负 z-index 的子元素（按 z-index 升序）
- 无定位或 z-index: auto 的子元素，按文档流顺序
- 正 z-index 的子元素（按 z-index 降序，值大的在最上）
注意：负 z-index 元素会位于背景之下，常用于底层装饰或遮罩。
常见问题与解决方案
实际开发中常遇到“z-index 失效”的情况，原因多与堆叠上下文有关。
例如：
- 模态框被导航栏遮挡：检查 nav 是否因 opacity 或 transform 创建了堆叠上下文，导致其整体层级高于 modal
- 下拉菜单出不来：父级卡片组件设置了 transform，无意中提升了层级
- tooltip 显示异常：第三方组件封装了独立堆叠上下文，需调整其容器而非内部元素的 z-index
解决思路：
- 使用浏览器开发者工具检查元素是否处于预期的堆叠上下文中
- 避免不必要的堆叠上下文创建（如慎用 opacity: 0.99 或 transform: translateZ(0)）
- 统一管理 z-index 值，可使用 CSS 变量定义层级规范（如 --z-modal: 1000, --z-tooltip: 900）
基本上就这些。z-index 看似简单，但脱离堆叠上下文谈层级就是空中楼阁。掌握这两者的交互逻辑，才能真正掌控页面的视觉层次。
