移动端z-index失效的根源是隐式层叠上下文：先检查被遮挡元素position是否为static，再用layers面板定位创建stacking context的父节点（如含transform/opacity的元素），最后排查html/body的overflow或transform截断。
检查目标元素是否真有定位上下文
移动端 z-index 失效，第一反应不是调大数值，而是确认 position 值是否被悄悄重置为 static。响应式样式、媒体查询、Vue/React 的 class 动态切换都容易导致这个“回退”。
- 用 Chrome DevTools 选中被遮挡元素，在 «Computed» 面板直接搜
position，看最终值是不是relative、absolute、fixed或sticky - 特别注意
@media (max-width: 768px)里有没有漏写position声明——桌面端写了position: fixed，移动端没补，就只剩static - 临时加一句
position: relative（不影响布局），立刻验证层级是否恢复；若恢复，说明问题就出在这一步
用 Layers 面板定位“结界”父节点
移动端最常踩的坑是父级用了 transform 或 opacity 却浑然不觉——它们会隐式创建层叠上下文，把子元素关进“盒子”里，再高的 z-index 也出不去。
- 打开 Chrome 远程调试（或 Safari Web Inspector），进入 «Layers» 面板，勾选 “Show layer borders” 和 “Paint flashing”
- 逐级点击被遮挡元素的父节点，看哪一层突然标出 “Stacking Context: Yes”
- 重点盯那些没写
z-index却显示Yes的节点：大概率是它带了transform: translateZ(0)、scale(1)，或opacity: 0.999、filter: blur(0) - 临时删掉疑似父级的
transform或filter，观察遮挡是否立刻消失
警惕 body/html 的 overflow 和 transform 截断
移动端 Safari 对 html 和 body 的渲染限制极严，这两处一旦触发层叠上下文或裁剪，position: fixed 元素（如弹窗、底部导航）基本必挂。
- 在 «Computed» 面板里从
html→body→ 根容器（如#app）逐级检查，搜stacking context和overflow - 典型雷区：
body { overflow: hidden }→ 导致fixed元素滚动时被裁切；html { transform: translateZ(0) }→ 整个文档变成单一层叠上下文，“全局最高”的弹窗也只在它内部排第一 - 修复优先级：先删
body和html上所有transform、opacity、filter；再检查overflow是否意外设为hidden或auto
别信 z-index: 9999，要信 stacking context: Yes
真正卡住你的从来不是数值大小，而是某层祖先悄悄拿到的那张“隔离卡”。z-index: 9999 在局部上下文里只是“军区司令”，对外面来说就是一张扁平卡片。
- 层叠上下文嵌套越深，越难靠堆数值破局；必须回到结构本身，找到那个创建“结界”的父元素
-
will-change: transform和transform: translateZ(0)在移动端几乎等价，但前者更轻量，且不会强制新建上下文（除非配合其他属性） - 如果必须保留动画加速，优先用
will-change: opacity替代transform，它触发的上下文影响范围更小
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
