z-index在position: absolute下仍失效，主因是computed position被覆盖回static，或父级创建层叠上下文（如opacity
z-index 在 position: absolute 下依然失效，不是因为定位写错了，而是它根本没进入有效的层叠比较范围——要么被父级“关小黑屋”，要么自己压根没真正激活定位。
为什么 position: absolute 了，z-index 还是不生效？
表面看写了 position: absolute，但实际 computed 值可能已被覆盖回 static。常见于：
- 其他更高优先级规则（如 CSS 重置、框架默认样式、
!important声明）悄悄把position覆盖掉了 - JS 动态添加 class 时只改了
z-index，漏掉同步设置position - Vue/React 中 class 切换后，CSS-in-JS 或 scoped style 导致定位声明被移除或重置为
initial
验证方法：打开 Chrome DevTools，选中元素，在 «Computed» 面板搜 position，确认最终值确实是 absolute，而不是 static。
父级用 opacity、transform 或 filter 悄悄建了“结界”
position: absolute 元素的 z-index 只在**最近的层叠上下文**内有效。只要它的任意一个祖先节点满足以下任一条件，就会创建新层叠上下文，把子元素的 z-index 锁死在里面：
立即学习“前端免费学习笔记（深入）”；
-
opacity小于 1（哪怕只是opacity: 0.999） -
transform不是none（包括transform: translateZ(0)、scale(1)、rotate(0)） -
filter不是none（哪怕filter: blur(0)） -
will-change: transform或will-change: opacity isolation: isolate
此时，即使子元素 z-index: 9999，也只能跟同个父容器下的兄弟比大小，完全盖不过外部 z-index: 1 的弹窗。
快速定位：在 Elements 面板逐级点击父节点，右侧面板 «Layout» 标签页里看 «Stacking context» 是否突然变成 Yes；临时注释掉父级的 transform 或 opacity，遮挡是否立刻消失。
iOS Safari 下 transform + z-index 组合特别脆弱
移动端 Safari 对 transform 和 z-index 的配合极其敏感。典型翻车场景：
- 父容器用了
transform: translateZ(0)触发硬件加速，但没显式设z-index - 子元素写了
z-index: 100，却仍被同级 fixed 导航栏压住
解法很具体：在触发 transform 的父容器上，同时加 position: relative 和 z-index: 0。不能只靠 transform，否则等于主动埋雷。
务必真机测试——模拟器经常无法复现该问题。
别忽略 z-index: 0 和 z-index: auto 的本质区别
很多人以为 z-index: 0 是“安全兜底”，其实它会强制创建新层叠上下文；而 z-index: auto（默认）在已定位元素上不会创建上下文，更利于层级穿透。
排查时重点看：父容器是否意外设置了 position: relative + z-index: 0 —— 这等于给整个子树画了个圈，把所有 z-index 都关进去了。
真正需要“始终顶层”的组件（如全局提示、全屏遮罩），与其堆数值或修子元素，不如把它们挂到 body 下，用 position: fixed + 手动计算偏移——结构比数值更可控。
