如何用CSS排查移动端层叠上下文问题

移动端z-index失效的根源是隐式层叠上下文：先检查被遮挡元素position是否为static，再用Layers面板定位创建stacking context的父节点（如含transform/opacity的元素），最后排查html/body的overflow或transform截断。

检查目标元素是否真有定位上下文

移动端 z-index 失效，第一反应不是调大数值，而是确认 position 值是否被悄悄重置为 static。响应式样式、媒体查询、Vue/React 的 class 动态切换都容易导致这个“回退”。

1. 用 Chrome DevTools 选中被遮挡元素，在 «Computed» 面板直接搜 position，看最终值是不是 relative、absolute、fixed 或 sticky
2. 特别注意 @media (max-width: 768px) 里有没有漏写 position 声明——桌面端写了 position: fixed，移动端没补，就只剩 static
3. 临时加一句 position: relative（不影响布局），立刻验证层级是否恢复；若恢复，说明问题就出在这一步

用 Layers 面板定位“结界”父节点

移动端最常踩的坑是父级用了 transform 或 opacity 却浑然不觉——它们会隐式创建层叠上下文，把子元素关进“盒子”里，再高的 z-index 也出不去。

1. 打开 Chrome 远程调试（或 Safari Web Inspector），进入 «Layers» 面板，勾选 “Show layer borders” 和 “Paint flashing”
2. 逐级点击被遮挡元素的父节点，看哪一层突然标出 “Stacking Context: Yes”
3. 重点盯那些没写 z-index 却显示 Yes 的节点：大概率是它带了 transform: translateZ(0)、scale(1)，或 opacity: 0.999、filter: blur(0)
4. 临时删掉疑似父级的 transform 或 filter，观察遮挡是否立刻消失

警惕 body/html 的 overflow 和 transform 截断

移动端 Safari 对 html 和 body 的渲染限制极严，这两处一旦触发层叠上下文或裁剪，position: fixed 元素（如弹窗、底部导航）基本必挂。

1. 在 «Computed» 面板里从 html → body → 根容器（如 #app）逐级检查，搜 stacking context 和 overflow
2. 典型雷区：body { overflow: hidden } → 导致 fixed 元素滚动时被裁切；html { transform: translateZ(0) } → 整个文档变成单一层叠上下文，“全局最高”的弹窗也只在它内部排第一
3. 修复优先级：先删 body 和 html 上所有 transform、opacity、filter；再检查 overflow 是否意外设为 hidden 或 auto

别信 z-index: 9999，要信 stacking context: Yes

真正卡住你的从来不是数值大小，而是某层祖先悄悄拿到的那张“隔离卡”。z-index: 9999 在局部上下文里只是“军区司令”，对外面来说就是一张扁平卡片。

1. 层叠上下文嵌套越深，越难靠堆数值破局；必须回到结构本身，找到那个创建“结界”的父元素
2. will-change: transform 和 transform: translateZ(0) 在移动端几乎等价，但前者更轻量，且不会强制新建上下文（除非配合其他属性）
3. 如果必须保留动画加速，优先用 will-change: opacity 替代 transform，它触发的上下文影响范围更小