视频容器必须用 position: relative 的包裹 div，不可直接设在 video 上；文字按钮需 absolute + transform 居中；z-index 需父子协同设置；移动端热区不小于 44px × 44px。
必须给视频容器加 position: relative，否则文字和按钮会相对于 body 定位，直接飘到左上角或视口外——这不是兼容性问题，是定位机制本身决定的。
视频容器必须用包裹 div 设 position: relative
<video> 标签自身不能作为定位上下文。即使你给它加 position: relative，在多数浏览器中仍不可靠：它可能破坏内联布局、触发意外高度塌陷，或导致 object-fit 行为异常。
- 正确做法：用一个
<div class="video-wrapper">包住<video>，并对该div显式设position: relative - 这个
div必须有可预测的高度——推荐用aspect-ratio: 16 / 9或min-height: 100vh，避免因视频未加载完导致容器高度为 0 - 不要依赖
display: flex或grid父级自动提供定位上下文；它们不等价于position: relative
文字/按钮用 position: absolute + transform 居中才真正可靠
只写 top: 50%; left: 50%，会让元素左上角落在中心点，不是视觉居中。尤其当文字换行、按钮尺寸动态变化（比如响应式缩放）时，负 margin 更不可控。
- 居中按钮：必须配
transform: translate(-50%, -50%)，且确保按钮有明确宽高（如width: 64px; height: 64px） - 右上角角标（如“播放中”）：用
top: 12px; right: 16px，比left: calc(100% - 16px)更稳，避开盒模型计算误差 - 底部文字条：用
bottom: 0; left: 0; width: 100%，再配合background: rgba(0,0,0,0.7)和padding，别用margin-top: -XXpx抬升
层级和移动端点击热区常被忽略
z-index 不是孤立生效的。按钮被遮挡，往往不是数值太小，而是它的父容器（即那个 position: relative 的 div）没设 z-index，导致整个定位层被压在视频下面。
立即学习“前端免费学习笔记（深入）”；
- 视频容器（
.video-wrapper）建议设z-index: 1，按钮设z-index: 10，文字层设z-index: 5 - 移动端按钮必须满足最小触控尺寸：至少
44px × 44px，哪怕图标只有24px，也要用padding或伪元素撑开热区 - 确保按钮有
tabindex="0"和aria-label，否则键盘用户无法聚焦，屏幕阅读器不可见 - 避免给视频容器加
opacity < 1、filter或will-change，否则会意外创建新层叠上下文，让z-index失效
最易漏的是容器高度坍缩和触控热区——前者让定位原点消失，后者让按钮“看起来能点、实际点不中”。这两个问题在真机测试前几乎无法发现。
