气泡位置偏移主因是未给父容器设 position: relative，导致定位锚点错误；箭头推荐伪元素+border+rotate；动画应仅用 transform/opacity 避免重排；多气泡需统一定位上下文并靠 DOM 顺序控制层叠。
气泡位置总偏移，八成是 position: absolute 找错了参考系——不是代码写错了，而是父容器没设 position: relative。
为什么气泡跟着鼠标跑时总“飘”在错误位置？
根本问题在于定位上下文丢失。当气泡用 position: absolute 但它的所有祖先都没设 position（即全是 static），浏览器会一路往上找到 <body> 作为锚点，导致 event.clientX / clientY 算出的坐标和实际渲染位置错位。
- 必须给气泡的直接父容器（比如
<div id="tooltip-container">）加上position: relative - 计算偏移时，用
container.getBoundingClientRect()拿到容器左上角在视口中的真实坐标，再减去event.clientX / clientY - 如果容器本身可滚动（
overflow: auto），别用top/left定位，改用transform: translate()，否则滚动时气泡会“粘”在视口不动
箭头怎么画才稳又兼容？
伪元素 + border + transform: rotate() 是目前最可靠方案。clip-path 虽灵活，但 Safari 旧版对 path() 支持差，且没法单独加边框或阴影。
- 典型三角形写法：
border: 8px solid transparent; border-top-color: #333; transform: rotate(45deg) - 箭头定位优先用
top/left配合position: absolute，别依赖父容器padding，否则响应式下容易错位 - 需要缩放适配时，把箭头尺寸设为
em或clamp()，而不是固定px
@keyframes 动画一卡一顿，是不是性能太差？
卡顿往往不是因为动画复杂，而是混用了触发重排（layout）和不触发重排的属性。比如同时动画 top 和 opacity，top 会强制浏览器反复计算布局。
立即学习“前端免费学习笔记（深入）”；
- 只用
transform和opacity做动画——它们走合成层，GPU 加速，不触发重排 - 避免在关键帧里写
top、left、width、height这类会触发布局的属性 - 如果要用阴影变化模拟漂浮感，
box-shadow必须每帧都写全五段参数（h-offset v-offset blur-radius spread-radius color），漏一个或结构不一致，动画就失效
多气泡叠加时为啥总盖不住、顺序乱？
层叠顺序（z-index）不是靠 JS 插入顺序决定的，而是由 DOM 节点顺序 + 定位上下文共同控制的。静态插入的气泡，后插入的反而可能被先插入的挡住。
- 确保所有气泡都在同一个定位上下文内（即共用同一个
position: relative父容器） - 气泡元素按需插入 DOM 末尾，自然获得更高堆叠顺序；若用
display: none切换，记得隐藏前先动画收尾再remove()，否则可能残留渲染痕迹 - 不要给每个气泡单独设
z-index，除非你明确需要打破文档流顺序——多数情况靠 DOM 顺序就够了
最容易被忽略的是：气泡容器的 overflow 属性。设了 overflow: hidden 能防止气泡飞出边界，但也会裁掉箭头——得配合 padding 或负 margin 把箭头“拉回来”，这点调试时经常漏掉。
