z-index 999 被遮挡？同级元素堆叠顺序排查指南

你以为设了z-index: 999就一定最“高”？其实它可能被悄悄盖住——根本原因在于该元素未设置position（如relative、absolute等），或其父容器意外创建了层叠上下文（比如设置了opacity、transform、filter等），导致子元素的z-index只能在父级内部比较，无法突破层级“出圈”。本文直击常见误区，帮你快速定位和修复看似诡异的遮挡问题。

z-index 999 为什么还是被盖住？先看它有没有生效

z-index 只对 position 值为 relative、absolute、fixed 或 sticky 的元素起作用。如果目标元素仍是 static（默认值），哪怕写 z-index: 99999，浏览器也直接忽略。

检查方式：在 DevTools 中选中该元素，看 Computed 面板里 z-index 是否显示为 999；若显示 auto，说明 position 没设对，或被其他 CSS 覆盖重置了。

• 常见漏点：position: static 被父级 transform 或 opacity: 0.99 暗中触发新层叠上下文，导致子元素的 z-index 失效范围缩小
• 别只改子元素——先确认父容器有没有意外创建层叠上下文（比如加了 transform: translateZ(0)）
• 用 DevTools 的“Layers”面板（Chrome）或“3D View”（Firefox）直观观察层叠结构

同级元素堆叠顺序不按 z-index？查它们是否在同一个层叠上下文里

两个元素即使 DOM 位置相邻、z-index 差 1000，只要分属不同层叠上下文，就无法直接比较。比如 .modal 在 #app 内，而遮挡它的 .header 是 body 直接子元素——它们的共同祖先可能是 body，但各自父级已分别创建了独立层叠上下文。

哪些属性会强制创建新层叠上下文？

• position: relative/absolute/fixed + z-index 值不为 auto
• opacity 小于 1（哪怕 0.999）
• transform 不为 none（包括 translateZ(0)、scale(1)）
• will-change: transform、filter、mask 等

关键判断：打开 DevTools → Elements → 右键目标元素 → “Show stacking context”。如果某父级被标为 “stacking context”，那它内部的所有 z-index 都只能在这个小世界里排序。

被遮挡的元素明明 position 正确，z-index 也生效，但还是压不住？看父级 z-index 是否拖后腿

子元素的 z-index 再高，也无法突破其所在层叠上下文容器的层级。例如：

<div class="header" style="position: relative; z-index: 10;">
  <div class="dropdown" style="position: absolute; z-index: 999;"></div>
</div>
<div class="content" style="position: relative; z-index: 20;"></div>

这里 .dropdown 的 z-index: 999 完全无效——它被死死锁在 .header（z-index: 10）这个容器里，而 .content 的 z-index: 20 更高，所以整个 .header（含下拉菜单）都被压在下面。

• 解决方向不是给子元素加更大 z-index，而是提升其**最近的层叠上下文容器**的 z-index
• 如果容器本身不能动（如第三方组件封装的 header），可尝试在它外层包一层 div 并设 position: relative; z-index: 100
• 警惕 overflow: hidden 父级——它虽不创建层叠上下文，但会裁剪子元素超出部分，造成“被遮挡”假象

ECharts / Ant Design / Vue 组件弹层被盖？优先检查框架默认样式是否悄悄建了层叠上下文

很多 UI 库或图表库会在根容器上加 transform 或 opacity 用于动画或过渡效果，这会无意中让整个组件树陷入一个低层级的层叠上下文。比如 ECharts 的 tooltip 默认是 position: absolute，但如果它挂载在某个带 transform: scale(1) 的 div 下，再高的 z-index 也出不去。

• 临时验证法：给组件外层加 style="transform: none !important; opacity: 1 !important;"，看是否恢复
• Ant Design 的 Modal 默认挂载到 body，但如果项目用了 createPortal 错误地挂到局部节点，就会掉进局部层叠上下文
• Vite/Vue 项目中，某些 CSS Scoped 编译可能意外插入 transform，建议检查生成后的 CSS 文件中是否有未预期的属性

真正难调的从来不是数字大小，而是搞清你写的 z-index 到底在跟谁比、在哪片空间里生效。

今天关于《z-index 999 被遮挡？同级元素堆叠顺序排查指南》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！