移动端弹窗z-index失效主因是父容器创建了局部层叠上下文，如transform或opacity导致；需检查position是否为fixed/absolute、排查媒体查询遗漏、移除body/html的transform/opacity、验证真机层叠上下文。
移动端弹窗 z-index 失效，基本不是数值写小了，而是被某层“结界”关住了——最常见的是父容器加了 transform: translateZ(0) 或 opacity 小于 1，导致弹窗被锁死在局部层叠上下文里。
检查弹窗元素是否真有定位上下文
z-index 对 position: static 元素完全无效，而移动端响应式样式极易把原本 fixed 的弹窗回退成 static。
- 用 DevTools 选中弹窗元素，在 «Computed» 面板确认
position值是fixed或absolute，不是static - 重点查媒体查询：比如桌面端写了
position: fixed，但@media (max-width: 768px)里没声明，结果移动端 fallback 成默认static - Vue/React 中动态插入的弹窗（如
v-if或useState触发），常漏设position，必须显式补上position: fixed和z-index
排查 transform 隐式创建的层叠上下文
移动端为了“强制 GPU 加速”，很多人给根容器、轮播 wrapper 或卡片加 transform: translateZ(0)，但这会静默创建新层叠上下文，弹窗的 z-index 只能在它内部比大小。
- 现象：
z-index: 9999的弹窗仍被导航栏盖住；DevTools 中弹窗的z-index在 «Computed» 里显示为灰色或not applicable - 验证方法：临时注释掉疑似父级的
transform（如#app或.carousel-wrapper），遮挡立刻消失 → 就是它 - iOS Safari 特别敏感：哪怕
transform: scale(1)或rotate(0.0001deg)都会触发，且可能直接让position: fixed降级为absolute - 替代方案：删掉
translateZ(0)；若必须动画，改用will-change: opacity或干脆不用硬加速
警惕 body 和 html 上的截断陷阱
移动端 Safari 对 body 和 html 的渲染限制极严，这两处一旦触发层叠上下文或裁剪，fixed 弹窗就会失效。
- 典型问题：
body { overflow: hidden }→ 弹窗随页面滚动被裁切；html { transform: translateZ(0) }→ 整个文档变成单一层叠上下文，“最高”的弹窗也只在它内部排第一 - 快速定位：在 DevTools 里逐级点击
html→body→ 根组件，看 «Computed» 里是否有stacking context: yes - 修复优先级：先删
body和html上所有transform、opacity、filter；再确保min-height: 100vh存在，避免 flex 居中异常间接影响
真正难的不是堆数字，而是看清哪一层 DOM 父节点悄悄加了 opacity: 0.99 或 filter: blur(0) —— 它们不报错，却能把整个弹窗体系关进盒子。每次改完样式，务必在真机上点开 DevTools 的 «Layers» 面板，盯一眼那个标着 “Stacking Context” 的节点在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
