移动端z-index失效主因是父级创建层叠上下文（如transform、opacity、filter），使子元素z-index作用域受限；fixed元素被盖因祖先触发层叠上下文；video置顶需适配x5/webkit同层播放；遮罩需插入body末尾并脱离层叠上下文；键盘顶起问题需用env()或js动态处理。
移动端 z-index 看似写了却没用，基本不是数值太小，而是被某层“结界”锁死了——transform、opacity、filter 这些属性只要出现在父级（哪怕隔好几层），就会创建新的层叠上下文，子元素的 z-index 只能在里面比大小，根本出不去。
为什么 fixed 元素被盖住？先查祖先是否创建了层叠上下文
fixed 元素被遮挡，本质是它的某个祖先（不一定是直接父级）触发了层叠上下文，把整个子树关进独立渲染“房间”。z-index 在这个房间内有效，但无法和房间外的元素比高低。
- 用 DevTools 的 «Computed» 面板逐级点击祖先节点，看是否有
stacking context: yes - 重点检查：
transform: translateZ(0)、opacity: 0.99、filter: blur(0)、will-change: transform、isolation: isolate - 常见高危位置：根容器（如
#app）、轮播 wrapper、视差滚动区域、甚至body或html上的transform - 临时删掉疑似样式，观察遮挡是否消失；确认后改用替代方案，比如用
visibility: hidden替代opacity: 0
video 标签强行置顶，z-index 完全无效怎么办
<video></video> 在 iOS Safari、安卓微信 X5 内核、部分国产浏览器中，会被当作原生控件强行渲染在最顶层，不参与 CSS 层叠计算。加再多 z-index 都没用。
- 安卓微信里必须移除
x5-playsinline——它实际效果是“强制置顶”，不是同层播放 - 只保留
x5-video-player-type="h5-page"（或"h5"），这才是开启同层播放的关键 - iOS Safari 需同时写
webkit-playsinline="true"和playsinline，再给<video></video>加transform: translateZ(0)+position: relative+ 明确z-index - 若仍失败（如旧版 QQ 浏览器），别硬刚 CSS，改用 JS 动态控制：
video.style.display = 'none'，操作前隐藏，结束后恢复
遮罩层盖不住内容？DOM 插入位置和根上下文最关键
遮罩层 z-index 设得再高，如果它被套在某个带 transform 的容器里，就永远只能在那个容器内部“称王”，盖不住外面的导航栏或弹窗。
- 把遮罩 DOM 直接插入
document.body末尾，避开所有业务组件容器 - 确保遮罩自身有
position: fixed（不是absolute）且z-index足够高（如9999），但它必须和关键 UI 同属根层叠上下文 - 别用
width: 100vw/height: 100vh——100vw包含滚动条宽度，会导致水平溢出；iOS 的100vh还会包含地址栏高度 - 推荐组合：
top: 0; right: 0; bottom: 0; left: 0;+display: flex; justify-content: center; align-items: center;+overflow: hidden
输入框/底部按钮被键盘顶起？fixed 不是万能解法
键盘弹出时，position: fixed 元素锚定的是初始视口高度，不会随软键盘动态上浮，结果就是按钮飘在半空、输入框被盖住。
- iOS 16.4+ 可用
bottom: env(keyboard-inset-bottom, 0px)，但必须包裹在@supports (bottom: env(keyboard-inset-bottom))中降级 - 安卓完全不支持
env()，稳妥 fallback 是给最外层容器加padding-bottom: 240px（实测常用值），并在focusin/blur时 JS 动态开关 - 更自然的解法是换用
position: sticky; bottom: 0，前提是父容器有min-height: 100dvh且未设transform或overflow: hidden - 注意：
scroll-margin-bottom必须配合可滚动容器生效，且对脱离文档流的元素（如fixed）无效
真正难的不是写几行 CSS，而是判断当前遮挡失效到底是层叠上下文截断、原生控件劫持，还是视口行为异常——三者修复路径完全不同，混用方案只会让问题更隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
