z-index 失效的根本原因是父容器创建了层叠上下文，导致子元素的 z-index 只在局部生效；解决方法是将高优先级元素移至 body 下、确保父容器未触发层叠上下文或使用 pointer-events: none 实现事件穿透。
z-index 本身不会“穿透”——所谓穿透，其实是你误以为它该管全局，但它只在自己的层叠上下文中起作用。
为什么 z-index 看似失效？
根本原因不是 z-index 坏了，而是你给的元素被套进了一个已创建层叠上下文的父容器里。比如父级写了 opacity: 0.99、transform: translateZ(0)、filter: blur(1px) 或 will-change: transform，这些都会隐式创建新层叠上下文，导致子元素的 z-index 只能跟兄弟比，无法跨出去和外部同级元素竞争。
- 用 DevTools 逐级检查目标元素所有祖先，看是否有触发层叠上下文的 CSS 属性（尤其注意
transform类属性） - 别只盯着子元素的
z-index值，先确认它的直接父容器有没有定位且z-index是否足够高 -
transform-style: preserve-3d配合没设perspective时，会让z-index行为错乱，视觉上像被压在底下
如何让元素真正“浮出来”？
想让某个弹窗或提示层稳居最上，不能只靠给它设 z-index: 9999。得让它脱离原有 DOM 嵌套的层叠束缚：
- 把需要高优先级的元素（如弹窗）直接挂到
下，避免被中间某层父容器锁死层级 - 配合
position: fixed或position: absolute+ JS 动态计算位置（比如基于触发按钮的getBoundingClientRect()） - 如果必须保留在原结构中，就给它的最近一个“干净”父容器（没触发层叠上下文）显式设
position: relative和足够高的z-index
pointer-events: none 是穿透鼠标事件的唯一方式
如果你要的是“视觉可见但点击透过去”，pointer-events: none 是唯一可靠方案。但它不区分子元素——整块都不可点，除非你手动恢复：
- 对容器设
pointer-events: none - 对里面要响应点击的按钮、输入框等子元素单独设
pointer-events: auto - 注意：
<input>、<textarea></textarea>等表单控件不支持子元素重获焦点，这种写法会失败，得换结构 - IE11 不支持非 SVG 元素上的
pointer-events；iOS Safari 在滚动容器内偶尔有延迟
移动端和小程序里的特殊坑
苹果机型（尤其是 iOS 小程序）对 transform: rotate() 异常敏感：哪怕底层元素只是轻微旋转，也会覆盖高 z-index 的弹窗，伴随闪烁。这不是 bug，是渲染引擎对 3D 变换的层级处理逻辑不同。
- 用
transform: translateX()/translateY()替代rotate()实现类似动画效果 - 避免在可能与弹窗共存的区域使用
transform（包括scale、skew） - uni-app 中若用
cover-view，它不走 CSS 层叠规则，z-index对它无效，得用原生层级控制
真正卡住的从来不是 z-index 这个数字，而是你没意识到它背后那套层层嵌套的层叠上下文规则。调样式前，先打开 DevTools 的 Layers 面板，看清当前元素到底属于哪个“小世界”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
