视频遮挡表单的根本原因是video默认创建层叠上下文，需删除transform等触发属性、将表单移至body下并用absolute定位，移动端还需监听visualViewport适配键盘弹出。

视频背景盖住表单输入框，根本不是 z-index 数值写小了，而是 <video> 元素默认创建了独立层叠上下文，子元素或同级表单控件再高的 z-index 也压不住它。

video 默认触发层叠上下文，必须主动隔离

<video> 在多数浏览器中（尤其 Chrome 和 Safari）只要设了 position: relative、transform、opacity 或甚至只是用了 poster 属性，就可能隐式创建新层叠上下文。此时它就像一个“玻璃罩”，表单元素哪怕 z-index: 9999 也只能在罩子内部比大小，永远盖不过去。

• 确认是否对 <video> 或其父容器加了 transform、filter、will-change、opacity: <1 —— 全部删掉，只保留 position: absolute + top/left/width/height
• 给 <video> 显式加 isolation: auto（非必需但可显式关闭隐式上下文）
• 若用 object-fit: cover，确保父容器没设 overflow: hidden —— 某些旧版 Safari 会因此额外触发上下文

表单必须脱离 video 的 DOM 包裹层级

把表单塞在 <video> 同级、同父容器下还不够；如果父容器本身是 position: relative 且有 z-index，它就成了新的层叠根，video 和 form 都被框死在里面。最稳做法是让表单直接挂到 document.body 下。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 用 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 < document.documentElement.clientHeight → 键盘大概率已弹出
• 设置 viewport meta 标签必须含 height=device-height，且禁用 user-scalable=no —— 否则 iOS 无法正确报告视口变化

真正难的不是数值调高，而是识别哪一层 DOM 突然成了层叠根；很多时候你改了十次 z-index，不如删掉一行 transform: translateY(0) 来得快。