position: absolute导致进度条拖动失效，因脱离文档流后若父容器未设position: relative，则相对于body定位，使鼠标事件坐标与滑块位置错位。
为什么 position: absolute 会让进度条拖动失效？
因为绝对定位把进度条的 .progress-bar 从文档流里拎走了，它的父容器（比如 .video-controls）如果没设 position: relative，那 absolute 就会往上一直找，最后相对于 body 定位——结果就是鼠标事件坐标和实际滑块位置对不上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给进度条的直接父容器加
position: relative，别指望靠外层 wrapper 或 body 来兜底 - 拖动逻辑里读取的
Event.clientX要减去父容器的getBoundingClientRect().left，不能直接用offsetLeft - 如果用了
transform: scale()缩放播放器，记得在计算时除以缩放系数，否则拖动会变快/变慢
用 flexbox 排控制按钮时，为什么音量图标总被挤出容器？
常见于把 .control-buttons 设成 display: flex 后，没限制子元素最小宽度，而音量按钮里的 <svg></svg> 或图标字体在小屏下收缩异常，或者 flex-shrink: 1 默认生效，把按钮压扁了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有按钮加
flex-shrink: 0，避免被压缩 - 音量按钮内部的
<input type="range">要显式设width: 60px（或用min-width），不能只靠flex自适应 - 如果按钮含文字（如“全屏”），用
white-space: nowrap防止换行撑高容器
进度条 hover 显示时间提示时，z-index 不生效怎么办？
不是 z-index 写错了，而是父级触发了新的层叠上下文（stacking context），比如 .video-player 有 opacity: 0.99、transform、或 will-change，导致子元素的 z-index 被锁死在该上下文内。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查进度条父容器是否无意中创建了层叠上下文，优先移除不必要的
opacity和transform - 时间提示元素（
.tooltip-time）不要放在进度条内部，提到和进度条同级、且父容器是.video-player的直接子元素 - 必要时用
position: fixed+ 动态计算top/left，绕过层叠上下文限制
移动端 touch 事件下，控制按钮点击区域太小怎么补救？
css 里写的 width: 24px; height: 24px 在手机上根本点不中，ios safari 默认会把小于 44×44px 的可点区域自动放大，但前提是它识别得出这是个“按钮”——如果用 <div> 模拟按钮又没加 <code>role="button"，这个兜底就失效了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有控制按钮必须用语义化标签：
<button></button>优于<div>，哪怕只是空壳 <li>用 <code>min-width: 44px; min-height: 44px强制触控区域，再用padding和background-size控制图标大小 - 避免在按钮上写
pointer-events: none或touch-action: manipulation（后者会禁掉双指缩放等操作）
真正麻烦的从来不是怎么排齐按钮或画好进度条，而是这些交互细节在不同设备、不同浏览器里表现不一致——比如 Safari 对 transform-origin 的解析和 chrome 差几个像素，调的时候得开着真机调试器一帧一帧看。