怎样使用CSS定位实现在视频播放器上的弹幕层？

弹幕容器必须用 position: relative 包裹视频，不可直接设在 video 标签上；弹幕层需加 pointer-events: none 以保障控件可点击；动画优先用 transform + transition；轨道分配须 JS 动态计算并及时清理 DOM。

弹幕容器必须用 position: relative 包裹视频

直接对 <video> 标签设 position: relative 是无效的——它默认是 inline 元素，且多数浏览器不将其视为可靠的定位上下文。常见错误是只给弹幕层设 position: absolute，结果弹幕飞到页面左上角或顶部空白处。

• 外层必须用 <div class="video-wrapper"> 这类容器包裹 <video>，并显式声明 position: relative
• 该容器宽度/高度需与视频一致（推荐用 width: 100% + aspect-ratio 或固定尺寸）
• 避免用 display: flex 或 grid 的父容器替代 position: relative——flex/grid 不自动创建定位上下文

pointer-events: none 必须加在弹幕层上

否则用户点不到视频控件（比如播放/暂停按钮、进度条），尤其在移动端会直接失效。这不是可选项，是必填项。

• 弹幕层（如 #barrageContainer）样式中必须包含 pointer-events: none
• 如果需要响应弹幕点击（比如高亮、跳转时间点），不能全局关掉，得改用 pointer-events: auto 配合事件委托，且只对具体弹幕元素启用
• 部分旧版 iOS Safari 对 pointer-events: none 支持不稳定，若遇兼容问题，可用 z-index: -1 + 单独一层控件覆盖来兜底

弹幕元素用 transform + transition 比 left 动画更稳

用 left 配合 setInterval 或 requestAnimationFrame 更新位置，在低端安卓机和旧 iPhone 上容易掉帧；而 CSS transform 走 GPU 加速，实测在 iPhone 6、Redmi 4 等设备无卡顿。

• 每个弹幕 <span> 设 position: absolute，初始 transform: translateX(100vw)
• 动画用 transition: transform 8s linear（时长按视频宽度和速度反推）
• 结束时监听 transitionend 事件移除 DOM，避免内存堆积
• 别用 jQuery animate() 或纯 JS 修改 left 值——重排重绘开销大，移动端尤其明显

防重叠和行高控制得靠 JS 动态计算

CSS 无法自动判断哪一行空闲，硬写死 top: 20px、top: 60px 会导致弹幕堆叠或大片留白。必须用 JS 实时分配垂直位置。

立即学习“前端免费学习笔记（深入）”；

• 维护一个数组记录当前各“轨道”的占用状态（例如 [false, false, true, false] 表示第 3 行被占）
• 新弹幕插入前遍历数组找第一个 false 位置，设为 top: calc(20% * index) 或固定像素偏移
• 轨道数建议设 4–6 行，太多易遮挡画面，太少易拥堵；超出容量时可丢弃或暂存队列
• 注意：font-size 和 line-height 必须固定，否则动态计算的 top 值会错位

真实项目里最容易被忽略的不是动画怎么写，而是轨道管理没做或做了但没清空已移出屏幕的弹幕节点——内存泄漏比卡顿更隐蔽，也更难 debug。