移动端视频自动播放层级遮挡本质是原生渲染层问题，z-index在x5内核等环境下失效；需移除x5-playsinline、保留x5-video-player-type="h5-page"、配合autoplay/muted/playsinline，并用display:none动态隐藏视频兜底。
移动端视频自动播放时的层级遮挡，本质不是 CSS 能“修好”的问题——z-index 在 X5 内核（微信、QQ、UC）、部分安卓 WebView 里对 video 元素完全失效，因为视频被提升到了原生渲染层。CSS 只能配合策略兜底，不能单靠它翻盘。
为什么加了 z-index 还是被盖住？
这不是你写错了，而是浏览器根本没走 DOM 渲染流程：
- X5 内核下，
x5-playsinline实际效果是“强制置顶”，不是“同层播放”；加了它反而让video跳出层叠上下文，z-index彻底失能 - 部分机型（如华为、小米自带浏览器）会直接调用系统播放器，
video标签退化为占位符，DOM 层面已无控制权 -
position: relative+z-index对原生视频容器无效，它不在同一个渲染平面
真正起效的 video 属性组合（H5 平台）
别混用冲突属性，只保留这一组：
- 必须移除
x5-playsinline（哪怕你写了x5-video-player-type，它也会优先劫持） - 必须保留
x5-video-player-type="h5-page"（"h5"也行，但"h5-page"兼容性更稳） -
webkit-playsinline="true"可加可不加，仅影响 iOS Safari，对安卓微信无作用 - 自动播放三件套缺一不可：
autoplay、muted、playsinline
示例：
<video autoplay muted playsinline x5-video-player-type="h5-page"><source src="./video.mp4" type="video/mp4"></source></video>
弹窗/输入框被遮挡时的动态兜底方案
当上述属性仍失败（比如用户用的是旧版 QQ 浏览器），就得放弃“压层级”，改用“躲着走”：
- 弹窗打开前，用
video.style.display = 'none'或给父容器加v-if="showVideo"（Vue）隐藏视频 DOM - 不要只 hide，要
display: none或remove()，visibility: hidden仍会占位且可能触发播放器残留 - 若需暂停帧画面，可在隐藏前截图 canvas 或用 poster 替代，否则黑屏是常态
- uni-app 场景下，
<cover-view></cover-view>仅在非 H5 端生效，H5 下必须走 JS 显隐控制
容易被忽略的兼容细节
这些点不处理，前面所有设置都可能白搭：
- 视频资源必须同域（
./video.mp4），跨域地址会被百度/X5 内核强制全屏劫持 - 避免在
video父容器上用transform、will-change或overflow: hidden，它们会创建隔离上下文，干扰显隐切换逻辑 -
pointer-events: none对遮挡无效——它只禁事件，不改视觉层级，别指望靠它“穿透”视频 - iOS Safari 要求用户手势触发后才能播放，
autoplay在静音前提下才可能成功，否则尺寸为空，后续所有定位（如遮罩层）都会错乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
