video元素在浮动侧栏下被裁剪或错位，主因是浏览器对视频内置控件的渲染层与CSS层叠上下文不一致；应避免overflow:hidden，合理设置z-index、禁用原生控件、全屏时监听并隐藏侧栏、保障宽高比、优化触摸交互。
video 元素在浮动侧栏下被裁剪或错位
常见于左侧固定侧栏 + 主内容区嵌入 <video></video> 的布局，视频播放器控件（尤其是全屏按钮、音量条）被侧栏遮挡，或 position: fixed 的侧栏导致 <video></video> 的 z-index 失效。根本原因是浏览器对 <video></video> 内置控件的渲染层与 CSS 层叠上下文不一致，尤其在 Safari 和旧版 Chrome 中更明显。
- 不要给
<video></video>父容器设overflow: hidden—— 它会直接裁掉弹出的控件浮层 - 确保侧栏和视频区域分属不同层叠上下文：给侧栏加
z-index: 1000，同时给视频父容器加z-index: 999并设position: relative - 禁用原生控件，用自定义 UI 避开冲突：
<video controls="false"></video>，再用video.play()、video.volume等 API 手动控制
全屏模式下侧栏仍覆盖视频画面
调用 video.requestFullscreen() 后，部分浏览器（如 Firefox）仍会将 position: fixed 的侧栏渲染在全屏视频之上，尤其当侧栏使用了 transform 或 will-change 时。
- 监听
fullscreenchange事件，在进入全屏时临时隐藏侧栏：document.addEventListener('fullscreenchange', () => { sidebar.style.display = document.fullscreenElement ? 'none' : 'block'; }) - 避免对侧栏使用
transform: translateZ(0)或will-change: transform—— 这类强制 GPU 加速会创建独立合成层，干扰全屏层级 - 若必须保留侧栏视觉存在，改用
visibility: hidden而非display: none，防止布局重排影响视频尺寸
响应式断点中视频宽高比错乱，挤压侧栏
当使用 width: 100% + height: auto 控制视频尺寸时，侧栏宽度变化可能触发主内容区宽度突变，导致视频高度计算错误，出现黑边或拉伸。尤其在 flex 或 grid 布局中，<video></video> 的 intrinsic aspect ratio 不被自动尊重。
- 用
aspect-ratio: 16/9（现代浏览器）或padding-top: 56.25%+position: absolute的容器包裹法保障比例 - 侧栏宽度切换时，避免直接修改其
width，改用flex-basis或grid-template-columns，让视频父容器能自然 reflow - 在媒体查询中为视频容器添加
min-width: 0，防止 flex 容器默认的min-width: auto强制撑开侧栏
触摸设备上视频控件点击失效或误触侧栏
在移动端，侧栏常为可滑动菜单，<video></video> 的原生控件热区小、响应延迟，手指滑动稍偏就会触发侧栏滚动，导致暂停/音量调节失败。
立即学习“前端免费学习笔记（深入）”；
- 增大控件可点击区域：用
video::-webkit-media-controls-play-button等伪元素扩展padding（仅 WebKit） - 禁用侧栏区域的滚动穿透：给视频容器加
touch-action: manipulation，并在侧栏上设touch-action: pan-y（允许垂直滚动但禁用水平拖拽） - 优先监听
touchend而非click，并加preventDefault()防止触发侧栏滚动
z-index 能解决的，关键在于理解浏览器如何为 <video></video> 创建渲染层、何时触发合成、以及触摸事件在多层叠加下的传递路径。最容易被忽略的是全屏状态下的 document.fullscreenElement 判断时机 —— 它在 fullscreenchange 触发前就已更新，但某些框架的响应式逻辑会滞后一帧，导致侧栏隐藏延迟。 
