z-index失效主因是元素未定位或被父级层叠上下文隔离；需确保position非static，并排查opacity
z-index 失效，99% 不是因为数值写小了，而是目标元素压根没进入有效的层叠上下文（stacking context），或者被某个父元素“关进盒子”里了。
为什么 z-index 写了却像没写一样
浏览器根本不会读你的 z-index 值——只要元素的 position 是 static（默认值），它就自动被排除在层叠计算之外。这不是“效果弱”，而是“不参与”。
- 常见误操作包括：只写
z-index: 999，忘了加position: relative - 用 JS 动态添加样式时，只改
z-index，漏掉同步设置position - 元素是
display: flex或grid的子项，误以为不用定位也能生效（其实可以，但仅限该容器内，且仍受父级上下文限制）
快速确认方法：打开开发者工具，选中目标元素，在「Computed」面板里搜 position，看最终值是不是 static。如果是，z-index 就等于没写。
怎么用 DevTools 快速定位 stacking context 拦路点
目标元素被盖住，说明它和遮挡者不在同一个 stacking context 里，中间至少有一个“隔离父级”。别猜，直接看浏览器渲染树怎么分组：
- 在 Chrome DevTools 的 Elements 面板里选中目标元素，右侧面板切换到 Layout 标签页，留意「Stacking context」是否显示为
Yes - 然后逐级向上点击父节点，每点一个就看这个字段是否突然变成
Yes - 重点盯那些“没写
z-index却突然变成Yes”的父元素——大概率是它用了opacity、transform或filter - 临时注释掉可疑样式（比如
filter: blur(2px)），观察遮挡是否立刻消失；恢复后加z-index: 0+position: relative显式控制上下文入口
哪些 CSS 属性会静默创建 stacking context
这些属性看着只是加点透明、动一下、模糊一下，实则一加就“结界成型”，而且连 warning 都不报：
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括transform: translateZ(0)、scale(1)、rotate(0.0001deg)） -
filter不为none（哪怕filter: blur(0)或filter: opacity(1)） -
will-change: transform或will-change: opacity isolation: isolate-
position: fixed或sticky（即使没设z-index） contain: layout paint
特别注意：z-index: 0 和 z-index: auto 效果不同——前者只要元素已定位，就会强制创建新上下文；后者不会（前提是元素已定位）。别以为加个 0 很安全，它可能正是问题源头。
修复思路不是堆数字，而是提级或绕开
子元素 z-index: 9999，父容器 z-index: 1，结果仍可能被兄弟容器（z-index: 2）整体压住。真正要调的，往往不是子元素的 z-index，而是那个触发上下文的父容器本身的 z-index 值。
- 如果必须保留动效（如
opacity或filter），就把目标元素用 Portal 挂载到document.body下，配合position: fixed手动定位（适合弹窗、Tooltip） - 更稳妥的长期方案：找到它们最近的共同父容器，给它显式加
position: relative+ 合理的z-index（比如z-index: 1000），让它成为统一的上下文根节点 - 在 Vue/React 中，避免把 modal 套在带
transform的布局容器里；改用createPortal直接挂到根节点
真正难的不是写对那行 z-index，而是得顺着 DOM 往上翻三五层，找到那个没声没息就切断层级链的 transform 或 opacity。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
