absolute定位通知气泡易“飞走”是因为父容器未设position: relative时，top值会相对于最近定位祖先（如body）计算，导致偏移出视口；正确做法是包裹触发元素的父容器加relative，并配合transform微调位置。
为什么 absolute + -top-x 组合容易让通知气泡“飞走”
直接用 absolute 定位通知气泡时，若父容器没设 position: relative，top 值会相对于最近的定位祖先（可能是 body），导致气泡飘到页面顶部之外。更常见的是：你写了 -top-2，但气泡却往上偏移了 0.5rem（即 8px），不是预期的“紧贴触发按钮上方”，因为 Tailwind 的 -top-2 是负向偏移，而多数场景需要的是“向上顶出一点”，实际该用 -top-1 或配合 transform: translateY(-100%) 才能真正悬停在元素正上方。
absolute 气泡必须绑定的父容器条件
通知气泡要稳定出现在目标元素（比如一个按钮）右上角，父容器得同时满足：
- 给触发元素（如
<button></button>）套一层<div class="relative"> <li>气泡本身加 <code>absolute top-0 right-0 -translate-y-1/2 translate-x-1/2，而不是只靠-top-2 - 如果触发元素是内联元素（如
<span></span>），需先加inline-block或block，否则relative无效 - 避免父容器有
overflow: hidden，否则气泡可能被裁切 - 气泡尖角对准按钮右上角 → 用
top-0 right-0 -translate-y-1/2 translate-x-1/2，再微调mt-1控制垂直间隙 - 纯顶部居中悬浮 →
top-0 left-1/2 -translate-x-1/2 -translate-y-1/2，此时-top-2反而会让它上移过头 - 若气泡带
before伪元素画三角，需预留至少top-3高度空间，否则三角会被截断 - 改用
inset-x-0+left-1/2+-translate-x-1/2实现水平居中，避免依赖右侧边界 - 对
top值加响应式前缀，比如sm:top-0 md:-top-3，防止小屏下气泡盖住按钮文字 - 禁用气泡的
pointer-events：pointer-events-none，否则可能拦截下方按钮点击 - 若用
transform移动气泡，注意 Safari 对transform+absolute的渲染抖动，可加will-change: transform
-top-x 的数值选多少才不遮挡也不悬空
Tailwind 的 top 系列值基于 theme('spacing')，默认 top-1 = 0.25rem（4px），top-2 = 0.5rem（8px）。通知气泡常用组合是：
移动端适配时 absolute 气泡突然错位的原因
在小屏下，如果气泡使用了固定 right-0，而触发按钮因响应式缩进或换行导致位置偏移，气泡就会脱离原位。更稳妥的做法是：
最常被忽略的一点：气泡内容超出容器宽度时，whitespace-nowrap 和 max-w-xs 得一起上，否则文字换行会撑开气泡、破坏 top 计算基准。
