video元素设z-index:-1无效是因为默认position:static；bootstrap无内置视频背景类；z-index生效前提必须配合position属性，如fixed或relative。
直接给 video 元素设 z-index: -1 不管用，是因为它默认是 position: static —— z-index 对它完全无效。真正起效的前提只有一个：先让元素“定位”起来。
为什么 background-video 类在 Bootstrap 里根本不存在
Bootstrap 没有 bg-video、video-bg 或任何内置视频背景类。所有试图写 class="bg-video" 并期待自动生效的做法，都会失败。原因很实在：
- 浏览器根本不允许把
video当作 CSS 的background-image使用，background: url(video.mp4)会直接报Failed to load resource: net::ERR_INVALID_RESPONSE - Bootstrap 的栅格、间距、定位工具（如
position-fixed、w-100）只是帮你快速写对 HTML 结构和基础样式，真正的层叠逻辑和缩放控制得靠手写 CSS - 所谓“响应式视频背景”，本质是把
video做成一个脱离文档流的底层图层，再用内容容器盖上去——不是 Bootstrap 封装的功能，而是你用它搭出来的布局结构
z-index 生效的硬性条件：必须配合 position
z-index 不是开关，是调节器；它只对已定位元素起作用。常见错误是只写 z-index: -1 却忘了加 position：
- 要让视频沉底：必须同时写
position: fixed（或absolute） +z-index: -1 - 要让按钮/导航浮在上面：它的父容器或自身必须设
position: relative（或absolute等），再配z-index: 1或更高 - 别依赖默认
z-index: auto—— 它在不同浏览器中行为不一致，显式声明更稳 - 如果视频父容器有
opacity: 0.99、transform: scale(1)或will-change: transform，它会创建新的层叠上下文，导致子元素的z-index: -1被截断 —— 此时更可靠的做法是给内容区域设z-index: 1，而非只调低视频
object-fit: cover 不等于自动居中，关键看 object-position
object-fit: cover 只负责“等比缩放并裁切以填满”，但裁哪一部分由 object-position 决定。默认是 50% 50%（即居中），但一旦父容器有 padding、margin 或其他偏移，实际视觉中心就可能跑偏：
- 始终显式写
object-position: center，避免依赖默认值 - 移动端 Safari 对
100vh计算不准（含地址栏高度），建议用min-height: 100vh+min-width: 100vw替代固定宽高 - 别只设
width: 100%; height: 100%—— 这会让视频按容器拉伸变形；必须搭配object-fit: cover才能保持比例 - 如果视频关键内容（比如人脸）总被裁掉，可微调
object-position: 50% 30%上移取景框，而不是换视频源
移动端 autoplay 失败的三个必填属性
iOS 和 Android 都强制要求：视频自动播放必须同时满足 autoplay、muted、loop，漏一个就黑屏或静音卡住：
-
autoplay：触发自动播放（但不保证立即开始） -
muted：绕过移动端静音策略（即使没声音也得写） -
loop：防止播完后留白或暂停 - 额外建议加
playsinline（iOS 必需），否则可能全屏弹出 - 务必提供
poster属性指向首帧截图——网络慢或 JS 未加载时，用户至少能看到静态封面
最易被忽略的点：视频元素本身不参与文档流，但它的父容器如果设了 overflow: hidden（比如某些 Bootstrap 的 .container-fluid 或自定义 wrapper），会导致视频被意外裁剪。检查 body 和最外层 div 的 overflow 设置，比反复调 z-index 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
