z-index失效主因是元素未处于同一层叠上下文，而非数值过小；需确保目标元素已定位（position非static），并排查父级是否由opacity<1、transform非none、filter非none等属性隐式创建新上下文，再通过DevTools的Computed或Layers面板定位并修复。
z-index 失效不是数值不够大，而是不在同一个上下文里
给元素设 z-index: 9999 却被盖住，大概率不是数字太小，而是它和目标元素根本不在同一个层叠上下文里。浏览器不会跨上下文比较数值，只在各自“小世界”里排序。比如一个 position: absolute 的弹窗，如果它的父容器有 opacity: 0.99，那整个弹窗就困在那个新创建的上下文中——哪怕它自己 z-index: 9999，也压不过根上下文里一个 z-index: 10 的 position: fixed 导航栏。
哪些 CSS 属性会悄悄创建新的层叠上下文
这些属性一旦生效，就会把元素及其所有后代“封进”一个独立的堆叠环境：
-
position: relative/absolute/fixed/sticky+z-index不为auto -
opacity小于 1（哪怕只是0.999） -
transform不为none（包括translateZ(0)这种“无意义”变换） -
filter不为none（哪怕只是blur(0)） -
will-change设了任何可触发重绘的属性 isolation: isolate
特别注意：flex 或 grid 容器的子项，只要设置了 z-index（哪怕 z-index: 0），也会立刻创建新上下文——这点常被忽略。
为什么 modal 总是被 dropdown 盖住？查 DOM 结构层级
常见问题：模态框（modal）弹出来，却被下拉菜单（dropdown）遮挡。表面看两者都用了 z-index，但真正原因往往是它们的父容器分别触发了层叠上下文：
立即学习“前端免费学习笔记（深入）”；
-
dropdown父容器用了transform: translateY(0) -
modal父容器是普通文档流，没触发上下文 - 结果：
dropdown所在上下文整体层级高于modal所在上下文
解决方法不是调高 modal 的 z-index，而是让它脱离那个低层级上下文——比如给 modal 加 position: fixed（自动进入根上下文），或确保它的祖先没意外触发上下文。
调试层叠问题时，开发者工具怎么看
Chrome / Edge 的 Elements 面板里，选中元素后，在 Styles 标签页往下拉，找到 “Computed” 部分，展开后搜索 stacking context。如果显示 “Yes”，说明它创建了新上下文；如果显示 “No”，说明它属于父上下文。
更直接的办法：打开 Rendering 面板（F12 → ⚙️ → More Tools → Rendering），勾选 “Paint flashing” 和 “Layer borders”。有层叠上下文的元素周围会出现绿色边框，能直观看到“隔离区”范围。
实际排查时，优先检查离目标元素最近的、有 opacity、transform、filter 的祖先节点——它们才是真正的“上下文制造者”，而不是你正在调的那个元素本身。
