弹幕正常飘动需满足三个核心条件：容器设position: relative且有显式宽高、弹幕项用position: absolute并动态更新top/left、容器z-index足够高防遮挡。
直播间弹幕不是加个 <div> 就能飘起来的，核心卡点就三个：容器没定位、弹幕没脱离文档流、层级被盖住。其他都是细节优化。
弹幕容器必须设 position: relative 且显式宽高
常见错误现象是所有弹幕堆在页面左上角或飞出屏幕外——根本原因就是父容器没设定位上下文。浏览器里 position: absolute 的元素会一直往上找最近的 position: relative | absolute | fixed 父级，找不到就落到 body 上，自然乱飘。
实操建议：
- 容器标签用
<div class="danmaku-container"></div>，样式中必须包含position: relative - 高度不能为
0（比如只靠子元素撑开又没内容时），得写死height或至少min-height - 别用
display: flex或display: grid直接包裹弹幕项，会干扰absolute的定位基准 - 移动端注意：
-webkit-transform在兄弟节点上也会隐式创建层叠上下文，慎用
每条弹幕必须用 position: absolute + 动态 top/left
固定位置的弹幕本质是不断更新每个元素的 top 和 left 值，靠 CSS 过渡或 JS 计算实现位移。不用 absolute 就没法精准控制起点和终点。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 每条弹幕
<span>必须设position: absolute，初始top要随机（如top: ${Math.random() * 60 + 20}px），否则全从同一行出发 -
left初始值设为容器宽度（container.offsetWidth），表示从右侧外进入 - 记得加
pointer-events: none到弹幕元素，否则会拦截鼠标事件，影响点赞、暂停等交互 - 不用
@keyframes写死每条弹幕持续时间——不同长度弹幕应有不同飞行时长，否则短弹幕飞太快、长弹幕卡半路
容器 z-index 不够高，弹幕被其他 UI 盖住
这不是“不显示”，而是“被盖住了”。直播间通常有播放器控件、标题栏、点赞动效等多层 DOM，弹幕默认渲染层级低，极易被遮挡。
实操建议：
- 容器本身要设足够高的
z-index（如z-index: 1000），别只给弹幕项设 - 避免用
z-index: auto或未声明z-index的父级（如.player-controls）形成新的层叠上下文，把弹幕框“关”在底层 - 检查是否有兄弟节点用了
transform、opacity < 1、will-change等隐式创建层叠上下文的属性
WebSocket 接入时，协议解析和心跳容易漏掉
很多教程只演示 ws.send()，但真实环境里服务端发来的不是纯文本，而是带协议头的二进制或 JSON 包；而且连接不发心跳，30 秒左右就会被断开。
实操建议：
- 服务端可能用自定义二进制协议（如 Bilibili 的 protobuf 封包），
ws.onmessage收到的是ArrayBuffer，需用new DataView()解析，不能直接JSON.parse - 心跳必须由客户端主动发
{"cmd": "HEARTBEAT"}（间隔建议 ≤30s），否则连接会被服务端断开 - 连接建立后，通常要先发认证包（如
{"roomid": 123, "uid": 456}），服务端返回{"code": 0}才开始推送弹幕 -
ws.onerror不会捕获连接失败，要用ws.onclose+ws.readyState !== 1判断是否异常断连
真正难的不是让字动起来，而是让几百条弹幕在各种机型、各种网络条件下都稳定不卡、不重叠、不遮挡、不丢帧——这些细节藏在每一帧的 requestAnimationFrame 里，也藏在每次 WebSocket 消息的解析逻辑中。
