z-index对video无效是因为浏览器将其作为原生控件强行渲染在最顶层，不参与标准层叠上下文计算；安卓微信中加x5-playsinline反而加剧遮挡，因其在X5内核中被实现为强制置顶而非同层播放，正确做法是移除该属性并仅保留x5-video-player-type="h5-page"。
为什么z-index对
这不是你写错了 CSS，而是浏览器把 <video> 当作原生控件强行渲染在最顶层——它压根不参与标准层叠上下文计算。iOS Safari、安卓微信 X5 内核、部分国产浏览器（小米/华为/QQ）都会这样干。哪怕父容器设了 position: relative 和 z-index: 9999，视频照样穿透所有 fixed 或 absolute 元素。
安卓微信里加x5-playsinline反而更遮挡
这是最常踩的坑：很多教程一上来就让加 x5-playsinline，结果在安卓微信（X5 内核）中视频直接升到最高层，z-index 彻底失效，弹窗、导航栏、输入框全被盖住。根本原因在于 X5 内核对这个属性的实现逻辑和文档不一致——它不是“启用同层播放”，而是“强制接管并置顶”。
- 必须移除
x5-playsinline（哪怕你同时写了x5-video-player-type="h5-page"） - 保留
x5-video-player-type="h5-page"或"h5"，这才是开启同层播放的关键开关 -
webkit-playsinline="true"仅对 iOS Safari 有效，不影响安卓微信，可保留但非必需 - 避免混用
x5-playsinline和x5-video-player-type，二者冲突时前者优先劫持
Safari 下必须触发 GPU 合成层才能生效
在 iOS/iPadOS Safari 中，z-index 对 <video> 无效，是因为它被强制放在原生控件层。仅加 webkit-playsinline 不够，它只控制是否全屏，不改变层级。
Wechat MP Article Stats Comments Suite - 微信公众号管理套件
下载
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
- 必须双写：
webkit-playsinline+playsinline - 真正起效的是给
<video>自身加transform: translateZ(0)和will-change: transform - 同时配
position: relative和明确的z-index（比如z-index: 2） - 悬浮层（如弹窗）需设
position: fixed+z-index: 10（必须 > 视频的z-index） - 禁用
controls属性，改用自定义控件——原生控件仍可能突破合成层限制
某些机型上 z-index 完全失效怎么办
部分安卓浏览器（如旧版 QQ 浏览器）会直接调用系统播放器，绕过 DOM 渲染层。<video> 不再是普通 HTML 元素，z-index 失去控制权，CSS 层叠规则彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 优先尝试
x5-video-player-type="h5-page"+ 移除x5-playsinline，覆盖约 70% 场景 - 若仍失败，改用动态控制显隐：
v-if="showVideo"或video.style.display = 'none'，在弹窗/操作前主动隐藏<video>容器 - 不要依赖
position: relative+z-index去“压”原生<video>，它不在同一个渲染平面 - uniapp 中遇到此问题，必须用
<cover-view>（仅限小程序），且必须是<video>的直接子元素
所有方案都依赖“视频未全屏”的前提。一旦用户点击播放、系统接管全屏逻辑，所有 CSS 和 DOM 层级控制都会瞬间失效。
