z-index 失效的根本原因是父容器创建了层叠上下文，导致子元素的 z-index 仅在该上下文中生效；常见触发属性包括 opacity
z-index 失效时先查是否创建了层叠上下文
很多情况下 z-index 看似写了却不起作用，根本原因不是写错了值，而是父容器无意中触发了层叠上下文——比如设置了 opacity 小于 1、transform 非 none、will-change、Filter，甚至 position: fixed 或 position: absolute 配合 z-index 都可能让子元素的 z-index 只在该容器内部生效。
常见误判点：
- 以为只要写了
z-index就能全局比大小，实际它只在**最近的层叠上下文内有效** - 用
opacity: 0.99做淡入动画，结果导致整个子树脱离文档层叠流 -
transform: translateZ(0)本意是开启硬件加速，却顺手创建了新层叠上下文
html5 布局中哪些属性会隐式创建层叠上下文
不是只有 z-index 能触发层叠上下文，html5 布局常用属性中，以下情况会自动创建（且无 z-index 值也能成立）：
-
position: absolute或position: fixed+ 任意z-index值（包括auto） -
opacity小于 1（哪怕只是0.999） -
transform不为none（如translateX(1px)、scale(0.99)） -
filter有值（哪怕filter: blur(0)） -
will-change: transform（即使尚未触发动画） -
perspective或backface-visibility
这些在 flex/Grid 布局里尤其容易被忽略——比如给一个 display: grid 容器加了 opacity，它里面所有 z-index 都只能相互比较，无法越过它去和兄弟节点竞争层级。
立即学习“前端免费学习笔记（深入）”；
如何判断某个元素是否处于独立层叠上下文
不能只看代码，得靠 DevTools 实时验证：
- chrome / edge：选中元素 → 右侧 Styles 面板 → 查看 “Computed” 标签页，搜
stacking context，若显示Yes即已创建 - firefox：Elements 面板右键元素 → “Inspect Stacking Context”（需启用实验性功能）
- 更直接的方式：在 Elements 面板中观察该元素是否被渲染为独立图层（Layers 面板可查看）
注意：z-index: auto 在非定位元素上不创建层叠上下文，但在 position: relative/absolute/fixed 元素上，只要满足其他任一条件（如 opacity），就会立刻激活。
避免意外层叠断裂的实用策略
层叠上下文不是 bug，是规范行为，但布局时要主动管理：
- 优先用
position: relative+z-index控制局部层级，而不是给父容器加transform或opacity - 动画中需要硬件加速？改用
will-change: transform并**仅在动画开始前添加，结束后移除** - 想让子元素穿透父级层叠限制？把该子元素用
position: fixed或position: absolute提到 body 下（需同步处理定位逻辑） - Grid/Flex 项目内需要精细 z 控制？尽量避免在容器上设
opacity/filter，改用子项单独设置
真正麻烦的从来不是“怎么让 z-index 生效”，而是“为什么它突然只在一小块区域内生效了”——那大概率是某处透明度、变换或滤镜悄悄建了个看不见的墙。