z-index失效的根本原因是元素未参与层叠计算，而非数值过小；常见于未定位或被祖先元素创建的独立层叠上下文隔离；需通过devtools检查position和z-index适用性，并排查opacity、transform等隐式触发层叠上下文的属性。
z-index失效几乎从不因为数值写小了
它失效，是因为目标元素根本没进入有效的层叠计算流程——要么没定位，要么被某个祖先“关进独立层叠上下文里”了。浏览器压根不读你的z-index值，连 warning 都不报。
常见错误现象：z-index: 9999的弹窗被一个没设z-index的header盖住；JS动态插入的tooltip突然不显示在最上层；Vue组件切换后浮层层级错乱。
- 用 Chrome DevTools 选中目标元素 → «Computed» 面板搜
position，确认不是static - 再搜
z-index，如果显示为(not applicable)或灰显，说明它未参与层叠计算 - JS 动态添加样式时，只改
z-index、漏掉position: relative是高频错误
哪些属性会偷偷创建层叠上下文（“结界”）
这些属性看着无害，但只要偏离默认值，就会静默创建新层叠上下文，把子元素锁在里面比大小：
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括transform: translateZ(0)、scale(1)、rotate(0.0001deg)） -
filter不为none（哪怕filter: blur(0.1px)） -
will-change: transform或will-change: opacity isolation: isolate-
position: fixed或position: sticky且z-index不是auto -
display: flex或grid容器中，子项设置了z-index（非auto）
特别注意：z-index: 0 和 z-index: auto 效果完全不同——前者会强制创建新上下文，后者不会（前提是元素已定位）。
怎么快速定位“结界源头”
别靠猜，用 Chrome DevTools 直接查：
- 选中被遮挡的元素 → 右侧 «Layout» 标签页看 «Stacking context» 是否为
Yes - 逐级点击向上父节点，第一个标为
Yes的就是“结界源头” - 打开 «Rendering» → 勾选 «Show layers panel» → 在 «Layers» 面板里直接看到每个上下文节点，点一下高亮对应 DOM
- 临时注释掉疑似父级的
transform、opacity、filter，看遮挡是否立刻消失——这是最快验证手段
重建层叠上下文的务实路径
修复不是堆数字，而是重构层级关系：
- 如果父容器加
transform或opacity只为过渡动画且非必须，直接删掉——最干净 - 若必须保留（如淡入/模糊），就把需要浮出的元素（如
dropdown、tooltip）用 JS 移到document.body下，配合position: fixed手动定位（注意滚动偏移） - 更可控的做法：给那个触发上下文的父容器自身设高
z-index（比如z-index: 1050），让它整个“小世界”抬高，而不是只给子元素狂加9999 - 在 React 中用
createPortal、Vue 中用Teleport挂载到body，彻底脱离干扰上下文
真正难的不是改哪一行 CSS，而是意识到：z-index 不是独立变量，它是嵌套在层叠上下文树里的相对值。每次想加个 9999 前，先往上点三下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
