通过设置 z-index 和 position 属性，可以控制全屏模式下视频控件的层级。具体做法是将容器设为相对定位并赋予较高的 z-index，同时将视频元素设为绝对定位并赋予较低的 z-index，这样控件就能覆盖在视频上方。
如何确保控件在全屏时不被视频遮挡
将父容器设置为 relative 定位，并为该容器分配一个高于视频元素的 z-index 值。同时，将 <video></video> 标签设置为 absolute 定位，使其脱离文档流并位于容器的底层。这样，放置在父容器中的任何子元素（如自定义控件）都会自然处于视频之上。
div.container {
position: relative;
width: 100%;
height: 100vh;
z-index: 10;
}
video.video-element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.controls {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 20;
}
上述代码中，.container 作为定位上下文，.video-element 被置于底层，而 .controls 拥有最高的 z-index，确保其始终可见。
立即学习“前端免费学习笔记（深入）”；
如何处理浏览器原生控件与自定义控件的冲突
隐藏浏览器原生的视频控件，使用 CSS 选择器 ::-webkit-media-controls 和 ::media-controls 来强制移除默认 UI。然后，通过 JavaScript 监听视频事件并手动显示或隐藏自定义的 HTML 控件层。这种方法避免了原生控件与自定义控件在层级上的竞争，确保自定义控件完全掌控视觉呈现。
video::-webkit-media-controls {
display: none !important;
}
video::media-controls {
display: none !important;
}
.custom-controls {
opacity: 0;
transition: opacity 0.3s;
}
video:hover + .custom-controls,
.custom-controls:hover {
opacity: 1;
}
此方案通过 CSS 隐藏原生控件，并利用 opacity 和 transition 实现自定义控件的平滑显示。用户交互时，自定义控件层通过更高的层级和透明度变化提供反馈，确保在全屏模式下操作流畅且无遮挡。
在全屏 API 触发后如何保持控件层级稳定
当调用 requestFullscreen() 时，浏览器会创建一个新的渲染上下文。为确保控件层级不变，需在进入全屏前预先设置好所有层的 z-index 关系，并使用 :fullscreen 伪类针对全屏状态进行样式微调。例如，在全屏状态下增加控件的 z-index 优先级，防止因浏览器内部层级重置导致的遮挡问题。
video:-webkit-full-screen {
position: absolute;
z-index: 1;
}
.container:-webkit-full-screen {
z-index: 100;
}
.controls:-webkit-full-screen {
z-index: 200;
}
通过为 :fullscreen 状态单独定义层级，可以确保在不同浏览器引擎下，控件始终位于视频之上。这种显式的层级声明消除了全屏切换时的不确定性，使开发者能够精确控制最终的用户界面表现。
