video元素z-index无效的根本原因是其默认进入独立合成层，脱离父级层叠上下文；需通过position+transform:translateZ(0)或will-change强制回归普通层叠上下文。
video 元素被其他元素盖住，z-index 不生效？
直接说结论：z-index 对 <video> 本身没用——除非它已脱离文档流（比如加了 position: relative/absolute/fixed）。更关键的是：**<video> 在部分浏览器（尤其是 Chrome + 硬件加速开启时）会进入独立图层，无视父容器的 stacking context**。
- 常见错误现象：
z-index: 9999写了，上面还是盖着个<div>或弹窗；调试时发现 video 的 computedz-index显示为auto，改了也不生效 - 根本原因不是 z-index 值不够大，而是 video 没参与当前 stacking context 的层级计算——它“飘”在别的合成层里
- 最稳妥的解法不是堆 z-index，而是让 video 和遮盖物处于同一合成上下文
强制 video 进入普通 stacking context 的写法
给 <video> 加上 position: relative + z-index，再配合 transform: translateZ(0) 或 will-change: transform 触发其创建自己的 stacking context（而不是被浏览器“特殊优待”）。
-
transform: translateZ(0)是最常用且兼容性好的方式，它让 video 主动进入合成层，同时服从父级 z-index 规则 - 避免只写
z-index不写position——这会让z-index完全无效 - 如果父容器用了
overflow: hidden，且 video 超出范围，transform可能导致裁剪，此时换用will-change: transform更安全
iframe 嵌入的视频（如 YouTube）被盖住怎么办
第三方视频 iframe 天然拥有更高合成优先级，z-index 基本无效。唯一可靠手段是利用 iframe 的 allow 属性配合 playsinline，并确保其容器有明确 stacking context。
- 必须加
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"，尤其不能漏掉picture-in-picture（影响图层策略） - 加上
allowfullscreen="true"和webkit-playsinline="true"（iOS Safari 必需） - iframe 容器自身要设
position: relative和足够高的z-index，且不能有opacity < 1或filter——这些会创建新 stacking context，把 iframe “锁”在底层
移动端 iOS Safari 的 video 层叠特例
iOS Safari 对 <video> 有硬性限制：全屏播放时自动提至顶层，非全屏时若未加 playsinline，也会强行拉到最上层——这时你写的任何 z-index 都白搭。
立即学习“前端免费学习笔记（深入）”；
- 必须加
playsinline和webkit-playsinline属性，否则 video 会“逃逸”出 CSS 层叠规则 - 避免用
object-fit: cover+height: 100%强撑高度——iOS 会误判为需要全屏，触发强制提层 - 如果仍被盖住，检查是否用了
fixed定位的导航栏或蒙层：它们在 iOS 上常因 viewport 缩放或滚动行为意外获得更高合成权重
