video元素必须设position: relative才能让控件层精准覆盖，因其默认为内联替换元素，无法创建定位上下文；正确做法是将其设为relative，再将控件作为其子元素用absolute定位，或统一包裹于relative父容器中进行绝对定位。
video元素必须设position: absolute才能让控件层精准覆盖
很多人把自定义控件（比如播放/暂停按钮、进度条）直接放在video外面，用margin或transform硬调位置，结果一换屏幕就错位。根本原因是video默认是内联替换元素，它的盒模型行为不支持“子元素绝对定位到它内部”。必须先让它成为定位上下文。
正确做法：给video加position: relative，再把控件包裹在同一个父容器里，用position: absolute定位；或者更干脆——把video自己设为position: absolute，控件作为同级兄弟元素绝对定位到同一父容器中。
- 不要对
video用display: block后还指望margin微调控件——这会让布局依赖具体像素值，响应式失效 -
top: 0; left: 0; width: 100%; height: 100%必须写全，否则absolute可能只占内容尺寸，不是容器尺寸 - 移动端 Safari 对
z-index敏感，若控件被遮挡，检查是否父容器有transform或opacity创建了新层叠上下文
控件容器需用padding-top撑高，否则bottom定位会漂移
常见错误：给控件加bottom: 0想贴到底部，但发现它总卡在视频中间——因为父容器高度由video原始尺寸撑开，而video本身又没固定宽高比。一旦屏幕变窄，video高度塌缩，bottom: 0就失去参照。
解法是复用响应式视频容器的经典结构：父容器设position: relative和padding-top: 56.25%（16:9），再设height: 0。这样容器高度完全由padding决定，不受video内容影响，所有absolute子元素的top/bottom才有稳定基准。
- 控件层（如
.controls）设position: absolute; bottom: 0; left: 0; width: 100% - 避免用
vh单位做控件垂直偏移，iOS Safari 的vh在地址栏收放时会跳变 - 如果控件需要随视频缩放等比变化（比如图标大小），用
em或rem比px更稳
object-fit: cover下，控件坐标系以容器为基准，不是视频画面
当video设了object-fit: cover，画面会被裁切，但控件的absolute定位依然基于整个容器区域——也就是说，你设right: 10px; bottom: 10px，控件始终在容器右下角，哪怕实际可见画面已被裁掉一半。
这通常是好事（控件位置稳定），但要注意两个陷阱：
- 如果视频原始比例是4:3，而容器是16:9，
cover会左右裁切，此时left: 50%的控件可能落在被裁掉的区域外——视觉上“消失”了 - 全屏状态下（
webkitbeginfullscreen触发），浏览器会绕过CSS，控件可能错位，需监听事件重置定位 - 不要用
video的getBoundingClientRect()算控件位置——纯CSS方案里，所有坐标都应基于容器，而非运行时测量
移动端点击区域太小？别只调font-size
在iPhone上点不动播放按钮，往往不是样式问题，而是touch-action或pointer-events被意外禁用。尤其当控件用了z-index: -1或包裹在transform容器里时，iOS Safari 会忽略触摸事件。
- 确保控件元素有
pointer-events: auto（默认值，但显式声明更保险） - 避免父容器设
touch-action: none，除非真需要禁用滑动——它会连点击也吃掉 - 最小点击区域至少
44px × 44px，用padding撑开，别只靠font-size放大文字 - 如果控件是伪元素（
::before），它默认无交互能力，必须配合content和pointer-events: auto
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
