移动端z-index失效主因是层叠上下文被transform/opacity/filter等属性隐式创建，或position未设为relative/absolute/fixed/sticky；需用DevTools Layers面板定位“结界”父节点并调整。
移动端 z-index 看似设了却没用，大概率不是数值太小，而是被某层“结界”锁死了——transform、opacity、filter 这些属性只要出现在父级（哪怕隔好几层），就会创建新的层叠上下文，子元素的 z-index 只能在里面比大小，根本出不去。
检查被遮挡元素是否真有定位上下文
z-index 对 position: static 元素完全无效，这是最常被忽略的前提。移动端尤其容易因响应式样式覆盖而意外还原为 static。
- 用 DevTools 选中被遮挡的元素，在 «Computed» 面板确认
position值是不是relative、absolute、fixed或sticky - 检查是否被媒体查询重置：比如桌面端写了
position: fixed，但@media (max-width: 768px)里漏写了，导致移动端回退成static - Vue/React 组件中，class 动态绑定可能让
position样式被条件性移除，需在移动端真机调试时实时查看 computed 样式
排查 transform 隐式创建的层叠上下文
移动端为了“强制 GPU 加速”，很多人习惯给容器加 transform: translateZ(0) 或 will-change: transform，但这会悄悄把整个子树关进独立层叠上下文里。
- 常见高危场景：
body或根容器（如#app）加了transform；轮播图、视差滚动、动画卡片列表的 wrapper 用了scale(1)或translateX(0) - 验证方法：在 DevTools 的 «Layers» 面板里，看被遮挡元素的任意父节点是否标为 “Stacking Context”；或者临时删掉疑似父级的
transform，观察遮挡是否消失 - 替代方案：不用
translateZ(0)，改用will-change: opacity（更轻量）或直接删掉——现代浏览器对多数动画已无需硬加速
注意 body/html 的 overflow 和 transform 截断
移动端 Safari 对 body 和 html 的渲染限制极严，这两处的样式一旦触发层叠上下文或裁剪，position: fixed 元素（比如弹窗、导航栏）就会失效。
立即学习“前端免费学习笔记（深入）”；
- 典型问题：
body { overflow: hidden }→ 导致 fixed 元素在页面滚动时被裁切；html { transform: translateZ(0) }→ 整个文档变成一个层叠上下文，“全局最高”的弹窗也只在它内部排第一 - 快速定位：打开移动端调试器（Chrome Remote Debugging 或 Safari Web Inspector），逐级点击
html→body→ 根组件，看 «Computed» 里是否有stacking context: yes - 修复优先级：先删
body和html上所有transform、opacity、filter；再确保min-height: 100vh存在，避免 flex 居中异常间接影响定位
别盲目堆高 z-index，先理清层级归属
设 z-index: 2147483647 不解决问题，反而可能压住第三方库（如 Ant Design 的 z-index: 1050 弹窗）正在过渡的中间帧，导致点击穿透或视觉卡顿。
- 真正要比较的不是子元素的
z-index，而是它们各自所在层叠上下文的“容器层级”——比如一个z-index: 1的父容器，可以整体压过另一个z-index: 9999但处于更低上下文的兄弟容器 - 实操建议：用自定义属性统一管理，例如
:root { --z-nav: 100; --z-modal: 1000; --z-toast: 2000; }，然后只给需要提层的容器（而非子元素）设值 - 终极手段：把关键浮层（如 loading、tooltip）用
ReactDOM.createPortal或<Teleport to="body">挂到body最外层，彻底脱离原有 DOM 层级束缚
真正难处理的不是怎么写 z-index，而是当多个 transform、opacity、filter 在不同嵌套层级叠加时，层叠上下文像俄罗斯套娃一样层层嵌套——这时候靠猜没用，必须用 «Layers» 面板一层层点进去，找到那个最先标上 “Stacking Context” 的父节点，它才是真正的“结界之门”。
