气泡定位不准八成因未设定位上下文；position: absolute会向上查找最近已定位祖先，若无则锚定视口，导致滚动缩放时飘走，须给直接父容器加position: relative并用devtools确认containing block。
气泡定位不准，八成是没设定位上下文
绝对定位的气泡不跟目标元素走，不是代码写错了，而是它根本找不到“锚点”。position: absolute 会一路向上找最近的 position 值为 relative、absolute 或 fixed 的祖先；如果没找到，就直接相对于视口（document.documentElement）定位——你拖动页面、缩放、嵌套进弹窗时，气泡立刻飘走。
实操建议：
- 给气泡的**直接父容器**（比如新手引导要高亮的那个按钮或卡片）加上
position: relative，哪怕它原本没样式也要显式写上 - 用浏览器 DevTools 查看 computed 样式里的
Containing Block，确认参考对象是不是你预期的元素 - 避免多层嵌套
position: relative，否则top/left值会逐层叠加，调试时坐标越来越难猜
滚动/缩放后气泡错位，fixed 定位 + getBoundingClientRect() 是解法
用 position: absolute 挂在某个容器里，滚动时气泡就掉队；用 position: fixed 又容易因父容器 transform 或 iframe 导致坐标系错乱。真正稳定的方案是：把气泡挂到 document.body 下，用 position: fixed，再靠 JS 实时读取目标位置。
关键细节：
-
getBoundingClientRect()返回的是视口坐标，但要注意：Mac 隐藏滚动条时它仍按 17px 算宽度，需手动补偿 - 不要用
offsetTop/offsetLeft——表格内、带transform的容器里结果完全不可信 - 移动端监听
touchstart和touchmove，别只靠mousemove；真机测试必须做，模拟器不反映 Safari 的实际行为
伪元素气泡内容动态更新，data-* + attr() 要写对位置
想用 ::before 或 ::after 显示新手步骤文案，但 content: attr(data-step) 总是空？问题不在 CSS，而在属性没写对地方。
必须遵守的规则：
-
data-step属性必须直接写在触发元素上，比如<button data-step="点击此处开始">开始</button> - 伪元素只能读取自身所在元素的属性，
content: attr(data-step)不会向上查找父节点，也不会向下穿透子节点 - 箭头用
::after、主体用::before，两者都要设position: absolute和明确的top/left，别依赖父容器 padding 去“挤”位置
气泡被遮挡或裁剪，z-index 和 overflow 才是真凶
气泡一半看不见？不是层级不够高，就是被父容器“砍”掉了。常见于 Dialog、Modal、表格单元格这类自带 overflow: hidden 或高 z-index 的组件。
排查顺序：
- 先检查气泡父容器是否设置了
overflow: hidden—— 表格<td>、卡片容器、弹窗 body 都爱干这事<li>确认气泡和触发元素都有 <code>position（哪怕只是position: relative），否则z-index无效 - 把气泡 DOM 插入
document.body最顶层，绕过所有局部overflow限制；用fixed定位时记得加pointer-events: none防止挡住下方点击
复杂点不在怎么画气泡，而在它得扛住滚动、缩放、暗色模式、多层弹窗叠加——这些纯 CSS 方案全靠运气，JS 动态计算才是稳解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
