全屏背景视频z-index失效是因video默认position: static，须设fixed/absolute才能激活；less混合器可封装object-fit与定位逻辑；less变量比css自定义属性更适合管理层叠值，因其编译期静态替换能稳定命中video:fullscreen伪类。
全屏背景视频的z-index为什么总失效
因为video元素默认是position: static，而z-index对static元素完全无效——这不是层级设低了，是压根没进层叠上下文。必须显式加position: fixed或absolute才能激活z-index。
常见错误写法：#myVideo { z-index: -1; }（无position）→ 实际渲染顺序由文档流决定，按钮永远被盖住。
-
position: fixed最稳妥：脱离文档流、不随滚动偏移、天然适配全屏覆盖 - 别用
position: absolute配top: 0; left: 0;——父容器若非position: relative，它会相对视口定位，但可能受滚动容器影响 -
z-index: -1可行，但前提是父级没有创建新的层叠上下文（比如opacity 或<code>transform），否则-1会被截断在父级内部
Less混合器怎么封装object-fit与定位逻辑
直接重复写object-fit: cover; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;太冗余。用Less混合器统一收口，还能带参数控制行为：
.bg-video-base(@fit: cover, @pos: fixed) {
display: block;
object-fit: @fit;
position: @pos;
top: 0;
left: 0;
min-width: 100vw;
min-height: 100vh;
width: auto;
height: auto;
}
- 用
@fit参数支持cover/contain切换，避免硬编码 - 不用
width: 100%; height: 100%——它强制拉伸，破坏原始宽高比 -
min-width/height+auto组合才是object-fit生效的前提 - 混合器里不写
z-index，因为它的值依赖上下文（背景层用-1，弹窗遮罩用9999）
为什么Less变量比CSS自定义属性更适合管理视频层叠值
CSS自定义属性（--z-bg: -1）在伪类如video:fullscreen里无法动态继承——浏览器进入原生全屏后，video脱离当前样式树，所有继承链断裂。而Less变量是编译期替换，生成的CSS是静态规则，能稳定命中video:fullscreen这类伪类。
- 声明：
@z-bg-video: -1;、@z-ui-overlay: 100;、@z-fullscreen-bg: #000; - 在
video:fullscreen规则中直接使用：background-color: @z-fullscreen-bg; - 避免用
background-image填全屏背景——iOS Safari不支持，且fallback难做 - 移动端需额外加
video::-webkit-media-controls隐藏控件，否则控件层会破坏z-index预期
容易被忽略的静音与自动播放兼容性兜底
即使CSS和Less都写对了，video在Chrome/Safari里仍可能因未触发用户交互而暂停，报错DOMException: play() failed because the user didn't interact with the document first。这不是样式问题，但会导致“背景没动”，让人误判z-index失效。
- HTML必须带
muted autoplay playsinline三属性，缺一不可 - 不要依赖JS的
document.addEventListener('click', () => video.play())——首次加载时用户还没点，视频就卡在poster上 - 加
preload="metadata"，只预加载头信息，避免整段视频阻塞首屏 - 务必提供
poster图：iOS Safari在autoplay失败时会显示poster，而不是黑屏或留白
真正麻烦的不是怎么写，而是video在不同状态（加载中/播放中/全屏中/静音失败）下，object-fit、z-index、background三者生效条件完全不同——得按状态分规则写，不能指望一套CSS走到底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
