移动端弹层z-index失效主因是被父级层叠上下文隔离，而非数值过小；需检查position是否为fixed/absolute等、父级是否触发opacity
移动端弹层的 z-index 失效，基本不是数值写小了，而是元素被“关进了一个独立层叠上下文里”——它再高，也出不去那个盒子。
弹层元素根本没参与层叠计算
浏览器只对 position 为 relative、absolute、fixed 或 sticky 的元素处理 z-index。默认的 static 下，z-index 完全被忽略，连提示都没有。
- 用 Chrome DevTools 选中弹层元素，在 «Computed» 面板搜
position，确认不是static - Vue/React 中动态插入（如
v-if或useState触发）的弹层，常漏设position: fixed，必须显式补上 - 响应式媒体查询里容易出问题：桌面端写了
position: fixed，但@media (max-width: 768px)没声明，移动端 fallback 成static
父级悄悄创建了层叠上下文“结界”
只要某个祖先节点满足以下任一条件，它就静默创建新层叠上下文，把子树锁死在里面比大小：
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括translateZ(0)、scale(1)、rotate(0.0001deg)） -
filter不为none（哪怕blur(0)或opacity(1)） -
will-change: transform或will-change: opacity
在 DevTools Elements 面板逐级点击父节点，右侧面板 «Layout» 标签页下看 «Stacking context» 是否突然变成 Yes；重点盯那些“没写 z-index 却显示 Yes”的节点。
iOS Safari 对 body 和 html 极其敏感
iOS Safari 渲染限制极严，body 或 html 上任何触发层叠上下文的属性，都会让整个文档变成单一层叠上下文：
-
body { overflow: hidden }→position: fixed弹层滚动时被裁切 -
html { transform: translateZ(0) }→ “最高”的弹层也只在它内部排第一 -
body或html上加了opacity 或 <code>filter，iOS 可能直接把fixed降级为absolute
修复优先级：先删 body 和 html 上所有 transform、opacity、filter；再确保 min-height: 100vh 存在，避免 flex 居中异常间接影响。
真机验证比 DevTools 更关键
Chrome DevTools 的 «Computed» 面板里 z-index 显示为灰显或 (not applicable)，说明它压根没进入有效层叠上下文；但 iOS Safari 的行为可能更激进——比如 transform: scale(1) 在桌面端无感，在真机上却直接让弹层失效。
- 每次改完样式，务必在真机上用 Safari Web Inspector 或 Chrome Remote Debugging 实测
- 临时注释掉疑似父级的
transform，遮挡立刻消失 → 就是它 - 若必须保留动画效果，改用
will-change: opacity，或干脆不用硬加速
真正卡住的从来不是 z-index 这个数字，而是你没意识到哪一层“结界”把它关住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
