z-index无效通常因未设position或被父级层叠上下文隔离；需先确保position非static，再检查祖先元素是否触发新层叠上下文（如opacity
z-index 无效，八成是因为没设 position，或者设了但被父级层叠上下文锁死了。
为什么 z-index 对某些元素完全没反应
浏览器压根不读你的 z-index 值——只要元素的 position 是 static（默认值），它就自动被排除在层叠计算之外。这不是“效果弱”，而是“不参与”。
常见误操作包括：
- 只写
z-index: 999，忘了加position: relative - 用 JS 动态添加样式时，只改
z-index，漏掉同步设置position - 元素是
display: flex或grid的子项，误以为不用定位也能生效（其实可以，但仅限该容器内，且仍受父级上下文限制）
怎么快速确认是不是 position 没生效
打开开发者工具，选中目标元素，在「Computed」面板里搜 position，看最终值是不是 static。如果是，z-index 就等于没写。
临时验证方法很简单：
- 在样式里加一行：
position: relative（几乎不影响布局） - 再刷新看
z-index是否立刻起效 - 如果还是无效，说明问题已转移到上层——大概率是某个父元素悄悄创建了新层叠上下文
父容器触发层叠上下文导致 z-index 被截断
即使你给子元素写了 position: absolute 和 z-index: 9999，只要它的任意一个祖先元素设置了以下任一属性，就会形成独立层叠上下文，把子元素的 z-index “关进盒子”里：
立即学习“前端免费学习笔记（深入）”；
-
opacity小于 1（比如opacity: 0.99） -
transform非none（哪怕只是transform: translateZ(0)） -
filter、will-change、isolation: isolate、contain: layout paint
此时子元素的 z-index: 9999 只能跟同个父容器下的兄弟比高低，根本盖不过隔壁 z-index: 1 的弹窗——因为它们不在同一个上下文里。
修复思路：提级 or 统一上下文
不能只盯着目标元素调数值，得看它在哪一层“打架”：
- 想快速定位问题：逐级向上检查父元素的 Computed 样式，搜
transform、opacity等关键词；临时注释掉可疑样式，观察是否恢复 - 必须保留动效又需要层级穿透？把目标元素用 JS 移到
document.body下，配合position: fixed手动定位（适合弹窗、Tooltip） - 更稳妥的长期方案：给共用父容器显式加
position: relative+z-index，让它成为统一的上下文根节点，避免碎片化隔离
真正难的不是写对那行 z-index，而是得顺着 DOM 往上翻三五层，找到那个没声没息就切断层级链的 transform 或 opacity。
