z-index无效主因是未设position或被父级层叠上下文锁定：元素position为static时z-index不参与层叠计算；父元素设置opacity
z-index 无效，八成是因为没设 position，或者设了但被父级层叠上下文锁死了。
检查元素是否真的启用了定位（position 不是 static）
浏览器压根不读你的 z-index 值——只要元素的 position 是 static（默认值），它就自动被排除在层叠计算之外。这不是“效果弱”，而是“不参与”。
- 打开开发者工具，选中目标元素，在「Computed」面板里搜
position，看最终值是不是static。如果是，z-index就等于没写 - 临时验证方法很简单：在样式里加一行
position: relative（几乎不影响布局），再刷新看z-index是否立刻起效 - 注意 JS 动态添加样式时，只改
z-index、漏掉同步设置position是高频错误；Vue/React 中 class 切换后，也要确认定位声明没被其他规则覆盖或重置为initial/unset
父容器悄悄创建了层叠上下文（stacking context）
即使你给子元素写了 position: absolute 和 z-index: 9999，只要它的任意一个祖先元素设置了以下任一属性，就会形成独立层叠上下文，把子元素的 z-index “关进盒子”里：
-
opacity小于 1（比如opacity: 0.99） -
transform非none（哪怕只是transform: translateZ(0)或scale(1)） -
filter、will-change、isolation: isolate、contain: layout paint -
position: fixed或sticky+z-index非auto
此时子元素的 z-index: 9999 只能跟同个父容器下的兄弟比高低，根本盖不过隔壁 z-index: 1 的弹窗——因为它们不在同一个上下文里。
快速定位并绕过层叠上下文隔离
真正难的不是写对那行 z-index，而是得顺着 DOM 往上翻三五层，找到那个没声没息就切断层级链的 transform 或 opacity。
- 用 Chrome DevTools 逐级点击父节点，在右侧面板 «Computed» 标签下搜
Stacking context，第一个标为Yes的祖先就是“结界源头” - 临时注释掉父级的
opacity或transform，看遮挡是否立即消失——这是最快验证手段 - 若必须保留动效又需要层级穿透，把目标元素用 JS 移到
document.body下，配合position: fixed手动定位（适合弹窗、Tooltip） - 更稳妥的长期方案：给共用父容器显式加
position: relative+ 合理的z-index，让它成为统一的上下文根节点，避免碎片化隔离
最常被忽略的一点是：z-index: 0 和 z-index: auto 表面相似，实际效果截然不同——前者会强制创建新层叠上下文，后者不会（前提是元素已定位）。很多组件库默认给 wrapper 加 position: relative; z-index: 0，本意是“兜底”，结果反而成了层级隔离器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
