video元素z-index不生效主因是未创建层叠上下文，需同时设置position（如relative）和z-index；父容器的transform、opacity
video 元素的 z-index 不生效？先确认是否在堆叠上下文中
直接给 设置 z-index 没反应，大概率是因为它没触发层叠上下文（stacking context）。z-index 只对「已建立层叠上下文」且定位为 relative、absolute 或 fixed 的元素有效。
常见误操作：只加 z-index: 10，却忘了加 position: relative —— 这时 z-index 完全被忽略。
- 必须同时设置
position（哪怕只是relative）和z-index - 父容器若设置了
transform、opacity 、will-change等属性，会隐式创建新层叠上下文，导致子元素的z-index只在该父容器内比较，无法越级覆盖外部元素 -
浏览器对
的渲染有特殊处理：部分版本 Chrome 中，video默认以「合成层」（composited layer）形式渲染，可能绕过常规层叠规则，尤其当启用了accelerated-video
用 position + z-index 控制视频层叠顺序的实操要点
想让 盖在按钮或弹窗上，或反过来被遮挡，关键不是堆属性，而是理清层级锚点。
- 给
加position: relative（不改变布局）+z-index: 2；给要盖住它的蒙层加position: absolute+z-index: 3，且两者需同属一个最近的「非 static 定位祖先」 - 避免在
父容器上滥用transform: translateZ(0)或will-change: transform—— 这会割裂层叠上下文，使内部z-index失效于外部 - 若视频嵌在
或 Web Components（如 Shadow DOM）中，z-index作用域进一步受限，此时需在宿主容器上统一控制，而非 inside video
video 被其他元素意外遮挡？检查 opacity 和 filter 影响
opacity: 0.99 或 filter: blur(1px) 看似微小，却足以让父容器创建新的层叠上下文，把 “锁”在底层。
