视频遮挡表单的根本原因是video默认创建层叠上下文，需删除transform等触发属性、将表单移至body下并用absolute定位，移动端还需监听visualviewport适配键盘弹出。
视频背景盖住表单输入框，根本不是 z-index 数值写小了，而是 <video></video> 元素默认创建了独立层叠上下文，子元素或同级表单控件再高的 z-index 也压不住它。
video 默认触发层叠上下文，必须主动隔离
<video></video> 在多数浏览器中（尤其 Chrome 和 Safari）只要设了 position: relative、transform、opacity 或甚至只是用了 poster 属性，就可能隐式创建新层叠上下文。此时它就像一个“玻璃罩”，表单元素哪怕 z-index: 9999 也只能在罩子内部比大小，永远盖不过去。
- 确认是否对
<video></video>或其父容器加了transform、filter、will-change、opacity: —— 全部删掉，只保留 <code>position: absolute+top/left/width/height - 给
<video></video>显式加isolation: auto（非必需但可显式关闭隐式上下文） - 若用
object-fit: cover，确保父容器没设overflow: hidden—— 某些旧版 Safari 会因此额外触发上下文
表单必须脱离 video 的 DOM 包裹层级
把表单塞在 <video></video> 同级、同父容器下还不够；如果父容器本身是 position: relative 且有 z-index，它就成了新的层叠根，video 和 form 都被框死在里面。最稳做法是让表单直接挂到 document.body 下。
- 用
document.body.appendChild(formEl)动态插入表单，而非留在视频容器内 - 用
getBoundingClientRect()计算视频区域位置，再通过top/left绝对定位表单，避免依赖相对父级 - 监听
resize和scroll时重新计算位置，但别直接绑定事件——用requestAnimationFrame节流，或改用IntersectionObserver监听视频可见性
移动端 fixed 输入框在 video 上方仍被遮挡？这是 visualViewport 压缩问题
iOS 键盘弹出会压缩 visualViewport.height，但 position: fixed 表单不会自动上移，它锚定的是物理屏幕底部，不是当前可视区域底部。单纯调 scrollIntoView 无效。
- 不要给表单容器设
position: fixed，改用position: absolute+ 动态bottom值（基于visualViewport?.height或 fallback 到window.innerHeight） - 监听
resize事件判断键盘状态：window.innerHeight → 键盘大概率已弹出 - 设置
viewportmeta 标签必须含height=device-height，且禁用user-scalable=no—— 否则 iOS 无法正确报告视口变化
真正难的不是数值调高，而是识别哪一层 DOM 突然成了层叠根；很多时候你改了十次 z-index，不如删掉一行 transform: translateY(0) 来得快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
