z-index在X5内核中失效是因为video被移至原生渲染层，脱离CSS堆叠上下文；必须移除x5-playsinline属性，保留x5-video-player-type="h5-page"，并用display:none动态控制显隐。
为什么z-index在X5内核里完全失效
不是你CSS写错了，而是X5内核（微信、QQ、UC等）把video元素直接扔进了原生渲染层——它压根不走DOM堆叠流程。z-index只对CSS渲染层有效，对原生视频容器天然失能。加z-index: 9999、position: relative、甚至transform: translateZ(0)都无效，因为视频早就不在同一个“世界”里了。
移除x5-playsinline是关键一步
这个属性名字像在支持同层播放，实际效果恰恰相反：x5-playsinline会强制视频置顶，同时让video脱离当前层叠上下文，导致所有CSS控制彻底失效。哪怕你同时写了x5-video-player-type="h5-page"，只要x5-playsinline存在，它就优先劫持并锁死层级。
- 必须从HTML中删掉
x5-playsinline属性（包括空值、""、"true"） - 保留
x5-video-player-type="h5-page"（比"h5"兼容性更稳） - 确保
autoplay、muted、playsinline三者都在video标签上显式声明
兜底策略：用display:none动态控制可见性
即使属性组合正确，部分安卓机型（如华为、小米自带浏览器）仍可能调用系统播放器，使video退化为占位符，DOM完全失控。此时不能依赖CSS隐藏，而要用JS动态切换显示状态：
- 初始加载时给
video加style="display:none" - 监听
canplay或loadeddata事件，再element.style.display = "block" - 若播放失败或用户退出，立刻切回
display:none防止残留遮挡 - 避免用
visibility:hidden或opacity:0——它们不释放渲染空间，仍可能拦截点击
别碰position和z-index组合
给video加position: relative再配z-index是典型误区。X5内核下，video的定位参考系和渲染平面已与普通DOM脱钩，强行设置只会干扰布局，无法改变层级。真正起效的是属性组合与JS控制节奏，不是CSS堆叠规则。
立即学习“前端免费学习笔记（深入）”；
最麻烦的从来不是数值写多大，而是你还在用DOM思维调试一个早已被系统接管的原生组件。
