全屏背景视频必须用position: fixed而非absolute，因absolute依赖父容器定位上下文，滚动时会偏移或失效；fixed则相对于视口固定，配合min-width:100vw、min-height:100vh、object-fit:cover及muted、autoplay、playsinline等属性才能真正全屏覆盖且跨端兼容。
全屏背景视频的容器必须用 fixed 而非 absolute
用 absolute 无法真正撑满视口——它依赖父容器定位上下文，而父容器往往不是 html 或 body，导致视频只覆盖局部区域。真正实现“全屏”且不随滚动偏移，必须用 fixed 定位。
常见错误现象：absolute 下视频在滚动时消失、被遮挡、尺寸错乱；z-index 失效是因为层叠上下文未正确建立。
-
fixed的起点是视口，天然适配全屏场景 - 确保父容器没有
transform、filter或will-change，否则会创建新层叠上下文，干扰z-index - 给
html和body加h-full w-full overflow-hidden，避免滚动条或默认边距干扰
Tailwind 中设置 video 元素为全屏背景的关键 class 组合
不能只靠 absolute + inset-0，必须配合 object-cover、min-w-full min-h-full 和显式尺寸控制，否则视频会拉伸变形或留黑边。
<div class="relative h-screen w-screen overflow-hidden"> <video class="absolute inset-0 w-full h-full object-cover" autoplay muted loop src="/background.mp4"></video><div class="relative z-10 ..."></div> </div>
-
inset-0在absolute或fixed下才等效于top-0 right-0 bottom-0 left-0 -
object-cover是关键：保证视频等比缩放并填满容器，不扭曲也不裁切过度 - 必须加
w-full h-full（即使有inset-0），某些浏览器对video的默认宽高处理异常 - 如果仍出现黑边，检查视频宽高比是否接近 16/9；可加
scale-x-110等微调，但优先改素材
z-index 层级失效的三个真实原因和修复方式
明明写了 z-50 却被遮住？大概率不是 Tailwind class 写错，而是层叠上下文断裂或隐式提升。
- 父容器用了
transform（如translate-y-4）→ 会创建新层叠上下文，子元素z-index只在该上下文中生效 → 改用top/margin替代 -
video元素自身有默认z-index: 0，但若其父div没设relative或position，则z-index不触发 → 必须确保视频容器有定位属性 - 想让内容盖在视频上？内容容器需与视频同级，并设
relative z-10；不要把内容嵌套在视频内部（video不支持子元素渲染）
移动端 Safari 的 autoplay 限制和兜底方案
iOS Safari 禁止无用户交互的自动播放（包括静音视频），直接导致背景视频空白。这不是 Tailwind 问题，但影响最终效果。
- 必须加
muted+autoplay+playsinline（后者防止全屏跳转） - 仍失败时，监听
canplaythrough后手动play()，并捕获Promisereject（Safari 会拒绝无交互的 play()） - 务必提供
poster属性：poster="/fallback.jpg"，作为加载失败或禁播时的视觉兜底 - 不要依赖
loop在所有设备上稳定工作；部分 Android 浏览器循环首帧卡顿，可加preload="auto"
overflow-hidden 和 playsinline，这两个一缺，要么滚动出滚动条，要么 iOS 上直接黑屏。视频背景看着简单，但跨端一致性恰恰卡在这些细节里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
