无法实现自动避边，因CSS锚点定位仅支持Chrome125+实验性滚动锚定，不处理视口边界判断与方向翻转，必须依赖JS通过getBoundingClientRect()动态计算坐标并fallback。
用 position: fixed + anchor-name 无法实现“自动避边”
新版 CSS 锚点定位（anchor-name / anchor-scroll）目前仅在 Chrome 125+ 实验性支持，且不适用于浮动提示框的边缘避让场景。它本质是为滚动锚定（scroll anchoring）和元素对齐设计的，不是定位 API。你不能用 anchor-position: top end 把 tooltip “钉”在按钮右上角并让它自动换边——浏览器根本不会根据视口边界重算锚点位置。
强行套用会遇到：
- anchor-name 只能设在祖先元素上，tooltip 自身不能成为锚点主体
- position: fixed 下的锚点计算丢失滚动容器偏移，导致滚动后错位
- 没有 fallback 机制，一旦浏览器不支持就完全失效
真正可用的“自动避边”必须靠 JavaScript + getBoundingClientRect()
所有稳定、可交付的 tooltip 边缘避让方案，都依赖手动计算按钮在文档中的真实坐标，并结合视口尺寸动态决策方向与偏移。核心逻辑不可跳过：
-
button.getBoundingClientRect()获取按钮在视口内的位置 - 加上
window.scrollX/window.scrollY转成文档坐标（否则嵌套滚动容器里必错） - 用
popup.offsetWidth和popup.offsetHeight判断是否越界 - 优先尝试
bottom: 0; left: 0（下拉），失败则切到top: 0; left: 0（上拉），再不行就右/左翻转
示例关键片段：
const rect = button.getBoundingClientRect();
const docX = rect.left + window.scrollX;
const docY = rect.bottom + window.scrollY;
const w = popup.offsetWidth;
const h = popup.offsetHeight;
<p>let left = docX;
let top = docY;</p><p>if (docX + w > window.innerWidth) {
left = window.innerWidth - w - 8; // 靠右贴边，留 8px 间距
}
if (docY + h > window.innerHeight) {
top = rect.top + window.scrollY - h - 8; // 改上拉
}</p><p>popup.style.left = left + 'px';
popup.style.top = top + 'px';为什么 position: relative 父容器这一步不能省？
tooltip 元素若直接插在 document.body 下，又没设 position: relative 的父容器，它的 position: absolute 就会向上找最近的已定位祖先——大概率落到 body 或 html 上。此时你 JS 算出的 left/top 是相对于视口的，但 CSS 定位基准却是整个文档，数值完全对不上。
立即学习“前端免费学习笔记（深入）”；
必须确保：
- 触发按钮和 tooltip 共享同一个 position: relative 父容器（比如 <div class="trigger-wrapper">）
- 这个 wrapper 不能带 transform、filter 或 perspective，否则会创建新层叠上下文，干扰坐标系
- tooltip 元素自身设 position: absolute，且 z-index 显式大于 0
移动端小屏要额外处理方向回退逻辑
纯靠“按钮下方 + 右侧”在 iPhone 竖屏或折叠屏上大概率失败。必须加方向状态机：
- 先尝试
bottom: 0; left: 0（下拉右贴） - 若按钮 y 坐标 top: 100%; left: 0（上拉）
- 若按钮 x 坐标 >
window.innerWidth - 120px，改用right: 0; top: 0（右贴+下拉） - 内容超长时，强制设
max-width: 280px+word-break: break-word，防止撑破布局
这个逻辑没法靠 CSS 单独完成。CSS 可以定义每种方向的样式类（如 .tooltip--top、.tooltip--right），但触发哪一类，得由 JS 根据实时坐标判断后加 class。
最易被忽略的点：计算坐标后必须用 getBoundingClientRect() 再验证一次 tooltip 实际渲染位置，尤其在软键盘弹起、页面缩放、字体加载完成等时机，视觉错位往往只在这些瞬间暴露。
