用 position: absolute 定位控制条易出问题，因未设父容器定位上下文时会相对视口定位，导致视频缩放、滚动或响应式时错位；须设父容器 position: relative 以提供 bottom 参照，且避免 transform 干扰定位计算。
为什么用 position: absolute 定位控制条容易出问题
直接给控制条设 position: absolute 且不指定父容器的定位上下文，它会相对于整个视口（document）定位，而不是视频容器。结果就是：视频缩放、滚动、响应式布局时，控制条飘走或错位。
必须确保视频容器（比如 <div class="video-wrapper">）有 <code>position: relative 或 position: absolute，否则子元素的 bottom 值无参照物。
- 父容器没设定位 →
bottom: 0生效但基准是视口，不是视频底部 - 父容器高度未显式定义（如仅靠
video自撑开）→ 绝对定位可能塌陷或截断 - 视频用了
object-fit: cover且宽高比不固定 → 控制条的width若写死会溢出或留白
如何让控制条紧贴视频底部并半透明
核心是三层结构：外层容器定参考系，video 自然流式渲染，控制条绝对定位覆盖其上。半透明靠 background-color 的 rgba 值，不是 opacity —— 后者会让内部按钮文字也变淡。
```css
.video-wrapper {
position: relative;
display: inline-block; /* 避免块级占满整行，方便嵌入 */
}
video {
display: block; /* 消除默认基线间隙 */
}
.controls {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.6); /* 半透明黑底，文字仍清晰 */
padding: 8px 12px;
box-sizing: border-box;
}
```
-
video设display: block是为了去掉行内元素默认的下缘空白，否则控制条和视频之间会有缝隙 -
.controls的width: 100%依赖父容器是relative，否则无效 - 别用
opacity: 0.6，它会让里面的<button></button>和文字也变灰，可读性差
响应式下 bottom 定位失效的常见原因
当页面缩放、横竖屏切换或使用 transform: scale() 时，absolute 元素的 bottom 计算可能失准，尤其在 iOS Safari 中表现明显。
- 避免对父容器用
transform（如scale、rotate），它会创建新的定位上下文且干扰bottom解析 - 移动端建议加
min-height: 1px到.controls，防止 Safari 在某些 zoom 级别下把高度计算为 0 - 如果视频用
aspect-ratio+width: 100%实现响应式，确保.video-wrapper不被 flex 或 grid 的对齐属性意外压缩
控制条内容与交互的兼容性注意点
半透明控制条里放进度条、音量滑块这些表单控件时，原生样式在不同浏览器中差异大，且 absolute 定位后 z-index 易被其他元素遮挡。
- 务必给
.controls加z-index: 10（或更高），否则可能被视频全屏按钮、弹幕层盖住 - 进度条用
<input type="range">时，iOS 上默认样式窄且难拖动，需用-webkit-appearance: none重置，并手动设置height和cursor: pointer - 不要给控制条设
pointer-events: none—— 即便只是“显示”，用户也需要点击播放/暂停
控制条看似简单，但 bottom 能否稳住，取决于父容器是否真正“可控”；而半透明效果是否可用，关键在颜色通道的选择和交互区域的保留。这两点漏掉任何一个，都会导致上线后第一眼就出问题。
