video元素z-index不生效主因是未创建层叠上下文，需同时设置position（如relative）和z-index；父容器的transform、opacity
video 元素的 z-index 不生效？先确认是否在堆叠上下文中
直接给 <video></video> 设置 z-index 没反应，大概率是因为它没触发层叠上下文（stacking context）。z-index 只对「已建立层叠上下文」且定位为 relative、absolute 或 fixed 的元素有效。
常见误操作：只加 z-index: 10，却忘了加 position: relative —— 这时 z-index 完全被忽略。
- 必须同时设置
position（哪怕只是relative）和z-index - 父容器若设置了
transform、opacity 、<code>will-change等属性，会隐式创建新层叠上下文，导致子元素的z-index只在该父容器内比较，无法越级覆盖外部元素 - 浏览器对
<video></video>的渲染有特殊处理：部分版本 Chrome 中，video默认以「合成层」（composited layer）形式渲染，可能绕过常规层叠规则，尤其当启用了accelerated-video
用 position + z-index 控制视频层叠顺序的实操要点
想让 <video></video> 盖在按钮或弹窗上，或反过来被遮挡，关键不是堆属性，而是理清层级锚点。
- 给
<video></video>加position: relative（不改变布局）+z-index: 2；给要盖住它的蒙层加position: absolute+z-index: 3，且两者需同属一个最近的「非 static 定位祖先」 - 避免在
<video></video>父容器上滥用transform: translateZ(0)或will-change: transform—— 这会割裂层叠上下文，使内部z-index失效于外部 - 若视频嵌在
<iframe></iframe>或 Web Components（如 Shadow DOM）中，z-index作用域进一步受限，此时需在宿主容器上统一控制，而非 inside video
video 被其他元素意外遮挡？检查 opacity 和 filter 影响
opacity: 0.99 或 filter: blur(1px) 看似微小，却足以让父容器创建新的层叠上下文，把 <video></video> “锁”在底层。
立即学习“前端免费学习笔记（深入）”；
- 哪怕只是临时调试加了
opacity: 0.999，也可能导致视频永远显示在最下层 -
backdrop-filter同样触发层叠上下文，且兼容性差，容易引发不可预测的遮挡行为 - 排查方法：用 DevTools 逐级关闭父元素的
opacity、filter、transform，观察视频是否突然“浮出”
移动端 Safari 视频层叠异常？优先用 playsinline + CSS containment
iOS Safari 对 <video></video> 有强制全屏策略，即使加了 playsinline，若未配合正确样式，仍可能被系统 UI 或其他 WebView 层覆盖。
- 必须同时设置：
playsinline属性 +webkit-playsinline+position: relative+z-index - 在包裹容器上加
contain: layout paint style，可防止外部重排干扰视频定位 - 避免用
height: 100vh布局视频容器——Safari 的地址栏收放会触发 viewport 高度跳变，造成视觉错位，看似层叠错乱，实为布局抖动
z-index 数值，不如打开 DevTools 的 Layers 面板，看视频是否真的在独立合成层里——那才是它不服从 CSS 层叠规则的根本原因。 
