本质是未建立正确层叠上下文：video默认为inline元素，z-index无效；必须设position: absolute或fixed，其父容器设position: relative，且避免transform/opacity触发意外合成层。
移动端视频播放器层级出问题，本质不是 z-index 没设对，而是没建立正确的层叠上下文。直接写 z-index: 999 大概率无效。
video 默认是 inline 元素，z-index 不生效
<video></video> 在 CSS 中默认为 display: inline，而 z-index 只对定位元素（position 为 relative、absolute 或 fixed）起作用。不显式设置 position，再高的 z-index 都会被忽略。
- 必须给
<video></video>设置position: absolute或position: fixed - 父容器需设
position: relative（否则absolute会相对于 viewport 定位，容易失控） - 避免用
position: static（默认值）或position: sticky（对 video 层级控制不可靠）
背景视频要置底，z-index: -1 有前提
想让视频当背景、内容盖在上面，很多人直接写 z-index: -1，但这个值只在「同一层叠上下文内」才有效。如果父容器没设 position: relative，z-index: -1 会把 video 推到根层叠上下文最底层——可能被 body 背景、其他 fixed 元素遮住。
- 包裹 video 的容器必须设
position: relative且无z-index（或设为auto），才能创建新层叠上下文 - video 本身设
position: absolute+z-index: -1才真正“沉底” - 内容区域（如按钮、文字）需同属该容器内，并设
position: relative+z-index: 10等更高值
避免 transform 和 opacity 触发意外合成层
加 transform: scale(1) 或 opacity: 0.99 看似无害，实则会让浏览器强制创建新图层（GPU 合成层），导致 video 脱离原有层叠上下文，z-index 关系彻底失效，常表现为：内容突然被 video 盖住，或点击穿透。
- 不要对
<video></video>使用任何transform、opacity、filter - 缩放适配请用
width/height+object-fit: cover，更稳定 - 动画需求改由外层容器承担，video 保持“干净”
iOS Safari 下 fixed 定位可能失效
在 iOS Safari 中，position: fixed 的 video 容器在页面滚动时可能出现错位、抖动甚至消失，尤其配合 transform: translateZ(0) 或 overflow scroll 区域时。
- 优先用
position: absolute+ 父容器position: relative替代fixed - 若必须 fixed，请确保父容器无
transform、perspective或will-change - 测试真机滚动行为，模拟器无法复现部分渲染异常
层级问题往往在开发后期才暴露，因为桌面 Chrome 对错误容忍度高。真正关键的是：每个 video 必须明确归属一个 position: relative 容器，且自身定位属性不能缺失或被间接覆盖。别依赖“看起来能用”，要验证它在 iOS 微信、安卓 WebView 和 Safari 切换标签页后的表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
