z-index失效主因是父元素创建了层叠上下文，导致子元素z-index仅在内部生效；常见触发属性包括position+非auto z-index、opacity<1、transform≠none等。
z-index失效时先查父元素有没有层叠上下文
绝大多数 z-index 不生效，根本不是子元素写错了值，而是它的某个父级（不一定是直接父级）悄悄创建了层叠上下文，把子元素“关进去了”。一旦形成层叠上下文，该元素内部的 z-index 只在它自己内部比高低，对外部完全没影响。
常见触发层叠上下文的属性有：position: relative/absolute/fixed/sticky + z-index（值不为 auto）、opacity 小于 1、transform 不为 none、filter 不为 none、will-change 包含相关属性等。
- 用浏览器开发者工具选中“失效”的元素，往上逐级看
Computed面板里的z-index和transform等属性 - 重点检查：父级是否加了
transform: translateZ(0)或opacity: 0.99这类“隐形”触发器 - 如果父级是
position: relative但没设z-index，它不会形成层叠上下文——这点常被误判
想让子盒子突破父级层叠上下文怎么办
不能靠给子元素设超大 z-index（比如 z-index: 9999），那只是在父级内部赢了，对外依然无效。真正要做的，是把子元素“提出来”，脱离那个封闭的层叠环境。
- 把子元素移出当前父容器 DOM 结构，挂到
<body>下（需配合 JS 动态定位） - 改用
position: fixed或position: absolute配合top/left定位，让它相对于视口或某个非层叠上下文祖先定位 - 删掉父级上不必要的
transform或opacity—— 如果视觉效果允许，这是最干净的解法
例如一个弹窗组件，父容器用了 transform: scale(1)，结果弹窗被压在底下。删掉这行 CSS，或者把弹窗用 portal 渲染到 body，问题就没了。
立即学习“前端免费学习笔记（深入）”；
Chrome DevTools里快速定位层叠上下文源头
Chrome 120+ 提供了层叠上下文可视化功能，比手动翻 Computed 高效得多。
- 打开开发者工具 →
Rendering面板 → 勾选Layer borders和Paint flashing - 更关键的是勾选
Show layer borders下方的Show layers panel（需重启 DevTools） - 在
Layers面板里能看到每个层叠上下文节点，点击可高亮对应 DOM 元素 - 注意：
z-index: 0和z-index: auto效果不同——前者会触发层叠上下文，后者不会
React/Vue项目里容易被忽略的层叠上下文陷阱
框架组件封装常自带 transform 或 opacity 动画，用户很少意识到它们在背后制造了层叠隔离。
- Ant Design 的
Modal默认用transform: translateY实现入场动画，如果 Modal 内部再嵌套一个Tooltip，Tooltip 很可能被截断或层级错乱 - Vue 的
<transition>组件默认加transform，若父容器已有z-index，子元素的z-index就会失效 - Next.js 的
Image组件默认启用loading="lazy"，某些版本会注入will-change: transform，间接触发层叠上下文
这类问题往往只在特定组合下暴露，调试时别只盯着自己的 CSS，得顺藤摸瓜查框架源码或生成的 class。
