z-index不生效主因是元素未定位或父容器创建了层叠上下文；需确保position为relative/absolute/fixed/sticky，且检查父级是否因opacity、transform等触发新堆叠上下文。
z-index 为什么有时候完全不生效？
因为 z-index 只在「已创建层叠上下文」的元素上起作用，而它本身又常是创建层叠上下文的条件之一——这个循环容易让人误以为“设了就该管用”。真实情况是：如果父容器没形成自己的层叠上下文，子元素的 z-index 就只能和兄弟元素比，但一旦父容器自己成了层叠上下文，子元素的 z-index 就只在该容器内部有效，无法越过父级去和外部元素争高低。
常见错误现象：
- 给一个
position: relative的 div 设置z-index: 999，但它仍被后面出现的普通 div 盖住 - 两个绝对定位元素，一个在另一个上面，但加了
z-index后顺序反而反了
关键判断点：
- 检查该元素的父容器是否已触发层叠上下文（比如父容器有
opacity: 0.99、transform: translateY(0)、或display: flex且子元素z-index不为auto） - 确认该元素自身是否满足「创建层叠上下文」的任一条件（如
position不为static且z-index是数值） -
z-index: auto和z-index: 0表面相似，但前者不创建层叠上下文，后者会——这点极易忽略
哪些 CSS 属性会悄悄创建层叠上下文？
除了大家熟悉的 position + z-index 组合，很多现代 CSS 属性会在你没察觉时“自动升维”，让元素进入独立的 z 轴空间。这些属性本身不带 z-index，但只要一用，就相当于给整个子树加了一道透明玻璃罩——罩内排序自成体系，罩外再高也穿不透。
立即学习“前端免费学习笔记（深入）”；
典型触发属性（必须满足值非默认）：
-
opacity值不等于1（哪怕0.999） -
transform值不等于none（包括translateZ(0)、scale(1)等看似无感的操作） -
filter值不等于none（哪怕只是filter: blur(0)） -
will-change设为transform、opacity等任意可触发项 - 父元素
display: flex或inline-flex，且子元素z-index显式设为数值（注意：不是父元素设z-index）
性能提示：过度使用 transform: translateZ(0) 强制硬件加速，可能意外创建大量嵌套层叠上下文，导致混合模式失效或滚动卡顿。
如何快速验证某个元素是否处于层叠上下文？
没有浏览器 DevTools 的直接标记，但可通过组合行为推断。最可靠的方式是观察它的子元素是否“失去对外部 z-order 的发言权”。
实操建议：
- 给疑似父容器加上
outline: 2px solid red，再给它的子元素设置z-index: -1；如果子元素仍显示在父容器之上（即红框被遮盖），说明它没形成层叠上下文；如果子元素被父容器内容盖住，则大概率已创建 - 在 Chrome DevTools 的 Elements 面板中，右键该元素 → “Break on” → “attribute modifications”，然后手动修改其
opacity或transform，看是否触发重绘层级变化 - 用 JavaScript 检查：
getComputedStyle(el).transform !== 'none'或parseFloat(getComputedStyle(el).opacity) ，这两个为真时基本可判定已触发
注意：z-index 值本身不能作为判断依据——一个元素可以有 z-index: 999 却因 position: static 而完全不创建层叠上下文。
flex 容器里的子元素 z-index 失效？
不是失效，而是被“提前收编”了。当父容器是 display: flex（或 inline-flex），它的每个子元素只要 z-index 不是 auto（哪怕设为 0 或 -1），就会立刻成为层叠上下文元素——此时它的 z-index 只决定它在 flex 容器内部的前后顺序，不再参与文档流全局排序。
典型陷阱：
- 一个
.modal写在 DOM 后面，本想靠位置+z-index盖住前面所有内容，但如果它恰好是某个 flex 子项，而前面的导航栏又是另一个 flex 容器的子项，两者互不隶属，谁上谁下就取决于各自父容器的层叠等级，而非单纯比数字大小 - 在 flex 布局中给子项设
z-index: -1，发现它被父容器背景盖住，不是 bug，是它已自成一体，-1是相对于 flex 容器内部而言的
解决思路：如果需要全局控制层级，应让 modal 脱离 flex 容器结构（例如用 position: fixed 或挂到 body 下），而不是在 flex 子项里硬调 z-index。
