z-index不生效的根本原因是父级创建了层叠上下文；opacity、transform、filter等属性会触发该机制，使子元素z-index仅在父级内部生效，需通过DevTools定位并移除可疑样式。
z-index 不生效？先看父级有没有创建层叠上下文
很多情况下给元素加了 z-index: 9999 还是被盖住，根本原因不是值不够大，而是它所在的父容器悄悄创建了层叠上下文——比如设置了 opacity: 0.99、transform: translateZ(0)、will-change: transform，甚至 filter: blur(1px)。这些属性会让父级变成“层叠上下文边界”，子元素的 z-index 只在该父级内部起作用，跨不出去。
常见踩坑点：
- 父级用了
position: relative+z-index: 1，但同时加了opacity: 0.99→ 实际创建了新层叠上下文，子元素再高也出不去 - 用
transform做动画时顺手加了translateZ(0)→ 同样触发层叠上下文，且不可逆（除非删掉该 transform） -
iframe或第三方组件内部自带样式，可能暗中设置了上述属性，导致你调z-index完全无效
怎么快速定位哪个父级在“截胡”z-index
打开 Chrome DevTools，选中被遮挡的元素，在右侧面板的 Computed 标签页里搜 stacking context。如果显示 “This element establishes a stacking context”，就说明它自己就是边界；再往上逐级点父节点，找到第一个标有该提示的祖先，就是问题源头。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 临时删掉父级的
opacity、filter、transform等可疑样式，看遮挡是否消失 - 把目标元素临时移出疑似父容器（比如剪切到
<body>底下），验证是否真由层叠上下文导致 - 避免对父级滥用
will-change，它比transform更容易隐式创建层叠上下文
z-index 要设多大才安全？别硬堆数字
设 z-index: 2147483647 看似保险，但实际反而容易冲突：某些 UI 框架（如 Ant Design、Element Plus）内部用固定区间管理层级（比如弹窗用 1000–1100，Tooltip 用 2000–2100）。你设个几千万，可能刚好压住别人正在动画中的过渡层，导致点击失效或视觉错乱。
更稳妥的做法：
- 查项目里已有的
z-index使用范围，通常在variables.css或设计系统文档里有定义 - 只比目标覆盖对象高 1～10 即可，比如要盖住一个
z-index: 1050的 Modal，设1051就够 - 用 CSS 自定义属性统一管理：
--z-modal: 1050; --z-tooltip: 1100;，避免散落硬编码
绝对定位元素被父级 overflow hidden 切掉怎么办
这和 z-index 无关，但常被一起误判：父级设了 overflow: hidden 或 auto，而子元素 position: absolute 且超出父框范围，就会被直接裁剪——哪怕 z-index 再高也露不出来。
解决路径很明确：
- 优先改父级：把
overflow: hidden改成visible，或去掉该声明（注意是否影响其他子元素布局） - 次选改结构：把绝对定位元素移到父级外部，用 JS 动态计算位置，或靠 CSS
position: fixed+top/left模拟（需处理滚动偏移） - 不推荐 hack 方式：比如给父级加
transform: translateZ(0)强制创建层叠上下文再调z-index——这会同时触发overflow失效，但副作用太大，容易引发渲染异常
层叠上下文不是开关，是嵌套的盒子。改一个 z-index 之前，得先看清它被装在第几层盒子里。
