是，弹幕元素几乎必须用position: absolute，因其需脱离文档流实现自由滚动、重叠与精准定位；父容器须设position: relative提供定位上下文，弹幕通过动态更新left/top值配合requestAnimationFrame实现平滑滚动。
弹幕元素必须用 position: absolute 吗？
不是必须，但几乎必须。弹幕要脱离文档流自由移动，position: relative 或 static 会让它卡在固定位置、无法重叠滚动。实际在线运行环境（如 CodePen、JSFiddle、或浏览器直接打开的 HTML 文件）里，如果父容器没设 position: relative，而弹幕用 absolute，它会相对于 <body> 定位——这反而方便统一控制。所以常见写法是：
<div id="danmaku-container" style="position: relative; width: 100%; height: 400px; overflow: hidden;"></div>然后所有弹幕
<div> 都用 position: absolute 并动态设置 top 和 left。
怎么用 requestAnimationFrame 实现平滑滚动？
用 setTimeout 或 setInterval 容易掉帧、卡顿，尤其弹幕一多就明显。真正轻量又顺滑的做法是每帧更新一次位置：
function animate() {<br> danmakus.forEach(d => {<br> d.style.left = (d.offsetLeft - 2) + 'px';<br> if (d.offsetLeft + d.offsetWidth < 0) {<br> d.remove();<br> }<br> });<br> requestAnimationFrame(animate);<br>}<br>requestAnimationFrame(animate);注意：不要在循环里反复调用 getBoundingClientRect() 或 offsetLeft 做判断——它们触发回流；优先缓存初始 left 值并用变量累减。
为什么新弹幕总堆在顶部不动？
常见原因是没给弹幕设初始 left（比如 100% 或具体像素值），或忘了设 white-space: nowrap 导致文字换行撑高，破坏横向滚动逻辑。还要检查：
- 父容器是否加了
overflow: hidden（否则弹幕滚出去还看得见） - 弹幕元素是否被其他 CSS（如
display: block默认占满行）干扰布局 - 是否在添加弹幕后才启动动画循环（否则早于
requestAnimationFrame的弹幕不会动）
<div style="position: absolute; top: 80px; left: 100%; white-space: nowrap; font-size: 16px; color: #fff; text-shadow: 1px 1px 2px #000;">这是一条弹幕</div>
在线运行时中文乱码或字体不显示？
多数在线平台（如 JSBin、CodePen）默认用系统字体，但 Windows 上可能 fallback 到不支持中文的英文字体。解决方法只有两个：
- 显式指定
font-family，例如"Microsoft YaHei", "PingFang SC", sans-serif - 确保 HTML 声明了 UTF-8：
<meta charset="UTF-8">（漏掉这个，连innerHTML插入的中文都会变方块）
font 标签或过时的 <font> 元素——它不支持中文等宽控制，且已被废弃。立即学习“前端免费学习笔记（深入）”；
弹幕看似简单，但滚动精度、DOM 节点复用、以及在线环境对内联样式的限制，才是容易卡住的地方。特别是 left 值用百分比还是像素、是否启用 will-change: transform 做硬件加速，这些细节在线运行时稍不注意就会表现不一致。
