z-index不生效是因为video和img不在同一层叠上下文；需检查父级是否触发新stacking context（如opacity、transform），确保定位元素同属一个上下文，必要时提升DOM层级或用pointer-events控制交互。
video 和 img 重叠时 z-index 不生效？先看是否在同一个 stacking context
z-index 只对「定位元素」（position 为 relative、absolute、fixed 或 sticky）生效，且必须处于同一层叠上下文（stacking context）中才可比较。
常见错误是给 和 z-index，但父容器用了 opacity: 0.99、transform: translateZ(0) 或 will-change: transform —— 这些都会隐式创建新 stacking context，导致子元素的 z-index 在各自内部比，彼此之间不再可比。
- 确保两个元素的最近公共祖先没有触发新 stacking context
- 检查父级是否意外加了
opacity（哪怕0.99）、filter、transform、isolation: isolate - 若必须用这些属性，把需要置顶的元素（比如覆盖图层）提到更高层级的 DOM 位置，或用
position: fixed脱离原上下文
用 pointer-events 控制点击穿透，而不是删掉图层
视频播放区域常需叠加操作按钮、字幕、热区等 iOS Safari 默认强制全屏播放 当频繁动画图层（如扫光效果、浮动 logo）与视频共存时，浏览器可能因合成策略失败导致闪烁或掉帧。此时可主动提示合成： 真实项目里最常被忽略的是 stacking context 的嵌套深度——一个 立即学习“前端免费学习笔记（深入）”；display: none，而应精准控制交互流：
pointer-events: none
pointer-events: auto（它会继承父级 none，所以必须覆盖）pointer-events: none 对 自身也生效 —— 别误加在 video 上，否则拖拽进度条、点击暂停都会失效移动端 video 全屏/内联播放导致图层错位？优先用 playsinline + CSS containment
，一旦进入全屏，所有 CSS 层叠关系重置，覆盖图层瞬间“消失”。解决不是靠 JS 监听全屏事件再重排，而是前置防御：
playsinline 和 webkit-playsinline 属性contain: layout paint style，防止浏览器因优化重绘而意外裁剪子元素top: 50%; transform: translateY(-50%) 类绝对居中——iOS 内联播放时可能触发渲染 bug，改用 flex 或 grid 布局更稳性能敏感场景：用 will-change 换取图层提升，但别滥用
will-change: transform（或 opacity） 本身设 will-change —— 视频解码和纹理上传已由 GPU 独立管理，加了反而干扰transform: translateZ(0) 或 opacity: 0.99）opacity: 0.99 在 body 上，就能让整页所有 z-index 归零。调试时先关掉所有疑似触发属性，再逐个开，比硬调数值靠谱得多。
