HTML5视频滚动“跑位”本质是定位上下文干扰：fixed失效因父元素触发新层叠上下文（如transform/filter），relative仅视觉偏移仍随滚动；iOS需playsinline防全屏跳动，absolute需相对定位祖先，排查overflow或z-index遮盖。
HTML5 视频元素在滚动时“跑位”，本质是 position: fixed 或 position: relative 使用不当，或被父容器的定位上下文干扰。不是视频本身有问题，而是它被卷入了错误的层叠或定位流。
为什么 video 加了 fixed 还会随页面滚动？
常见原因是父元素设置了 transform、perspective、filter 或 will-change，这些属性会创建新的层叠上下文（containing block），导致 position: fixed 失效——此时它不再相对于视口定位，而是相对于该父容器定位。
- 检查
video的所有祖先元素，用浏览器开发者工具逐层查看 computed styles 中是否有transform: translateZ(0)、filter: blur(1px)等触发新 containing block 的样式 - 临时移除这些样式，确认是否恢复固定效果
- 若必须保留（如动画/动效需求），可将
video提升到直接子级，脱离干扰层级
position: relative 的视频为啥也“飘”？
position: relative 本身不会让元素脱离文档流，它的偏移（top/left）只是视觉位移，仍受父容器尺寸和滚动影响。如果你本意是“悬浮在某区域右下角”，却用了 relative，那它必然随父容器一起滚动。
- 真正需要“悬浮跟随视口”的场景，必须用
fixed，而非relative - 如果要“相对某个区块定位但不滚动”，应确保该区块自身有
position: relative，且video设为position: absolute - 注意：
absolute元素的定位基准是最近的position: relative | absolute | fixed祖先，不是视口
移动端 iOS Safari 的 fixed 视频兼容陷阱
iOS Safari 对 position: fixed + 组合有特殊限制：当视频处于播放状态，且未设置 playsinline，系统可能强制全屏并破坏定位；即使加了 playsinline，某些版本仍会在键盘弹出、地址栏收缩时重排布局，导致 fixed 元素跳动。
立即学习“前端免费学习笔记（深入）”；
- 必须添加
playsinline和webkit-playsinline属性： - 避免在
fixed视频上同时使用transform（如scale），iOS 容易触发渲染异常 - 若需响应式尺寸，优先用
vw/vh或max-width，慎用transform: scale()
最隐蔽的问题往往不在 video 自身，而在它上面三层的某个 overflow: hidden 容器，或一个没写 z-index 却意外遮盖了 fixed 元素的兄弟节点——这类问题只能靠逐层检查渲染层（Layers panel）来定位。
