z-index无效？层叠上下文与盒模型排查全攻略

z-index失效往往不是数值太小，而是元素根本没被纳入浏览器的层叠计算体系——要么因缺少position定位被直接忽略，要么被某个祖先元素（哪怕只用了opacity:0.99或transform:translateZ(0)）悄然“关进”独立的层叠上下文里，导致内部z-index再高也影响不了外部；真正解决问题的关键，是借助DevTools的Stacking Context提示和Layers面板，逐级排查定位与上下文边界，看清元素究竟在哪个“盒子”里比大小，而不是盲目堆叠数字。

z-index 不生效，99% 的情况不是数字写小了，而是它压根没被浏览器纳入层叠计算——要么元素没定位，要么被某个父元素“关进”了独立的层叠上下文里。

元素没设 position（非 static）就写 z-index

这是最直白也最高频的硬性前提失效。z-index 只对 position: relative、absolute、fixed 或 sticky 生效；position: static（默认值）下，无论写 z-index: 9999 还是 -9999，浏览器直接忽略，连 warning 都不报。

• 检查 DevTools 的 Computed 面板，搜 position，确认最终值不是 static
• 动态插入的元素（如 JS 创建的 tooltip、Vue/React 中条件渲染的 modal）常漏掉 position 声明
• display: flex 或 grid 的子项即使没设 position，也能用 z-index 控制内部顺序，但依然受父级层叠上下文隔离——这点容易误判

父元素触发了层叠上下文（stacking context）

只要某个祖先元素满足以下任一条件，它就自动成为新的层叠上下文根节点，其内部所有 z-index 都只在它内部生效，无法和外部兄弟元素比高低：

• opacity 小于 1（比如 opacity: 0.99）
• transform 不为 none（包括 translateZ(0)、scale(1)、rotate(0.0001deg)）
• filter 不为 none（哪怕只是 blur(0.1px)）
• will-change 设为 transform、opacity 等
• isolation: isolate
• position: fixed 或 sticky（即使没写 z-index）

实操建议：
在 Chrome DevTools 的 Elements 面板中逐级点击父节点，右侧面板 Layout 标签页下看「Stacking context」是否突然变成 Yes；重点盯那些“没写 z-index 却显示 Yes”的父元素——大概率是它用了 opacity、transform 或 filter。

两个元素根本不在同一层叠上下文中比较

比如一个弹窗嵌在 .content 里，顶部导航栏是平级的 .header，两者父级都没显式创建上下文，那它们各自处于浏览器默认生成的“根上下文”中，互不感知。此时谁盖谁，取决于 DOM 顺序（后写的盖先写的），而不是子元素的 z-index 值。

• 修复关键：找到它们最近的共同父容器，给它加上 position: relative 和 z-index: 0（或更高），让它成为统一的层叠上下文入口
• z-index: 0 和 z-index: auto 效果不同：前者会强制创建新层叠上下文，后者不会（前提是元素已定位）；别以为加个 0 很稳妥
• 负值如 z-index: -1 会让元素沉到父上下文的背景和边框之下，慎用

移动端与框架组件中的典型陷阱

移动端尤其敏感：transform: translateZ(0) 在 iOS Safari 中会静默创建新层叠上下文，且让 position: fixed 元素降级为 absolute 行为。Ant Design 的 Modal 默认用 transform: translateY 实现入场动画，如果内部再嵌套 Tooltip，Tooltip 很可能被截断。

• Portal 类组件（如 Vue 的 v-model 弹窗）常因挂载位置深、父级带 transform 而失效；更稳妥的做法是把挂载点提到 document.body 下，再用 position: fixed 定位
• Chrome 120+ 的 Layers 面板可直接高亮每个层叠上下文节点，比手动翻 Computed 高效得多
• 不要只调子元素：子元素 z-index: 9999，父容器 z-index: 1，结果仍可能被兄弟容器（z-index: 2）整体压住

真正难的不是堆数字，而是看清谁在哪个盒子里比大小。一旦有 transform、opacity 或 filter 出现在 DOM 路径上，就得停下来问一句：这个“盒子”，是不是我真想让它管着这一片？

好了，本文到此结束，带大家了解了《z-index无效？层叠上下文与盒模型排查全攻略》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！