弹幕容器必须设 position: relative 且显式设置宽高，子弹幕用 position: absolute 动态控制 top/left，容器需高 z-index 并避免层叠上下文干扰，同时适配响应式与交互需求。
弹幕容器必须用 position: relative
弹幕飞入效果依赖绝对定位子元素在父容器内自由移动，如果父容器没设 position: relative，position: absolute 的弹幕会向上级找定位上下文，极大概率脱离直播间区域乱飘。
常见错误现象：div 里写了弹幕 span，但所有弹幕堆在页面左上角或跑到屏幕外——八成是忘了给容器加定位。
- 容器标签建议用
<div class="danmaku-container"></div>，样式中必须包含position: relative - 容器高度不能为
0（比如只靠子元素撑开又没内容时），需显式设height或min-height - 不要用
display: flex或display: grid直接包裹弹幕元素，会干扰absolute的定位基准
z-index 不够高，弹幕被其他 UI 盖住
直播间通常有播放器控件、标题栏、点赞动效等多层 DOM，弹幕默认渲染层级低，容易被遮挡。这不是“显示不出来”，而是“被盖住了”。
使用场景：弹幕能看见几条，但一打开弹幕开关/切清晰度后就消失；或者移动端点开菜单后弹幕全没了。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 容器本身要设足够高的
z-index（如z-index: 1000），别只给弹幕项设 - 避免用
z-index: auto或未声明z-index的父级（如.player-controls）形成新的层叠上下文，把弹幕框“关”在底层 - 移动端注意
-webkit-transform也会隐式创建层叠上下文，慎用在弹幕容器的兄弟节点上
弹幕元素必须用 position: absolute + 动态 top/left
固定位置的弹幕（比如底部滚动）本质是不断修改每个弹幕的 top 和 left 值，靠 CSS transition 实现平滑位移。不用 absolute 就没法精准控制起点和终点。
性能影响：每帧更新几十个弹幕的 top 值比操作 transform: translateY() 开销大，但兼容性更好（IE11 都能跑）；若追求性能，可用 transform 替代，但得统一用 will-change: transform 避免重排。
- 每个弹幕
span必须设position: absolute，且初始top要设成随机值（如top: 20px到80px区间），否则全部从同一行出发 - 不要用
animation写死每条弹幕的持续时间——不同长度弹幕应有不同飞行时长，否则短弹幕飞太快、长弹幕卡半路 - 记得加
pointer-events: none到弹幕元素，否则会拦截鼠标事件，影响点赞、暂停等交互
容器宽高不匹配视口，导致弹幕出界或裁剪
直播页常有响应式布局，但弹幕容器尺寸写死 width: 640px 或用 % 却没配合 max-width，结果在小屏上文字挤成一团，在大屏上飞一半就消失。
容易踩的坑：用 vw 设容器宽度，但没同步调整字体大小和弹幕间距，导致小屏弹幕重叠、大屏间隙过大。
- 容器宽度建议用
width: 100%，配合max-width限制上限（如max-width: 1280px） - 高度必须固定（如
height: 500px）或用aspect-ratio（支持较新浏览器），不能靠内容撑开 - 若用
vh，注意移动端 Safari 的地址栏缩放会导致视口高度跳变，建议监听resize事件动态重设
复杂点在于：弹幕不是纯视觉装饰，它得和视频时间轴对齐、支持暂停/快进时暂停飞入、还要兼容无障碍读取。这些逻辑一旦耦合进 DOM 结构，容器的基础尺寸和定位就容不得半点含糊。
