CSS anchor positioning 怎样把提示框对齐到按钮

如果提示框总是要跟着按钮移动，CSS anchor positioning 可以把这段关系直接交给 CSS：按钮声明为锚点，提示框声明要使用哪个锚点，再用 position-area 指定它位于按钮的哪一侧。这样不需要为每个按钮计算坐标，按钮移动、换行或进入滚动区域时，提示框仍然沿着同一个锚点布局。

先建立按钮与提示框的锚点关系

先把语义结构固定下来。按钮用 aria-describedby 指向提示框，提示框使用 role="tooltip"。CSS 中的锚点名必须是带双连字符的自定义标识符，例如 --help-button。

  
    使用说明
  
  

    这里显示字段的填写规则。
  

.help-demo {
  position: relative;
  min-block-size: 8rem;
  padding: 3rem;
}

.help-button {
  /* 给按钮声明一个可被定位元素引用的锚点名。 */
  anchor-name: --help-button;
}

.tooltip {
  /* absolute 是 anchor positioning 参与布局的前提。 */
  position: absolute;
  position-anchor: --help-button;
  /* 把提示框放在按钮下方的 position-area 单元。 */
  position-area: bottom;
  justify-self: center;
  margin-block-start: 0.5rem;
  max-inline-size: 18rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #8aa4c7;
  border-radius: 0.5rem;
  background: #f4f8ff;
  color: #19324d;
}

这段 CSS 分成两个动作：position-anchor 先把提示框关联到按钮，position-area 再决定它相对按钮的区域。只写锚点关联而不写位置，提示框并不会自动出现在按钮旁边。

用 position-area 把提示框对齐到按钮

position-area 可以理解成围绕锚点的 3×3 位置网格。bottom 表示按钮下方的区域；如果需要更明确的逻辑方向，可以改用 block-end 等逻辑值。提示框自身的宽度由内容决定，justify-self: center 让它在对应区域内与按钮居中。

如果布局需要精确贴合按钮边缘，也可以改用 anchor() 参与 inset 计算：

.tooltip--precise {
  position: absolute;
  position-anchor: --help-button;
  /* 让提示框顶部落在按钮底边，再留出 8px 间距。 */
  inset-block-start: calc(anchor(bottom) + 0.5rem);
  /* 让提示框的起点对齐按钮起点，宽度再由内容控制。 */
  inset-inline-start: anchor(left);
}

两种写法的取舍很直接：位置网格适合“在按钮下方居中”这类布局意图，anchor() 适合需要读取锚点具体边缘的场景。不要把 anchor() 写在普通流式元素上，它只对绝对或固定定位元素的 inset 属性有效。

给不支持 anchor positioning 的环境保留回退

前端组件通常不能假设所有浏览器都支持同一批 CSS 特性。可以把传统定位放进 @supports not，让不认识 anchor-name 的环境继续使用相对容器计算：

@supports not (anchor-name: --help-button) {
  .tooltip {
    /* 回退方案依赖 .help-demo 的 position: relative。 */
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
}

回退不是把两个方案混成一套坐标。主路径由锚点决定位置，回退路径由 .help-demo 这个定位容器决定位置；因此容器的尺寸和按钮在容器中的位置要保持可预期。

处理视口边界与重复组件

提示框靠近视口边缘时，默认的下方位置可能被裁切。可以为浏览器提供候选方向，让它在首选位置不合适时尝试另一侧：

.tooltip {
  /* 先尝试按钮下方，再尝试翻到块方向的另一侧。 */
  position-try-fallbacks: flip-block;
}

这个属性只描述候选位置，不替代实际的可见性和交互设计；如果提示框必须跟随按钮打开与关闭，还需要配合合适的 HTML 交互机制。另一个常见坑是列表中重复使用同一个 --help-button：同名锚点可能匹配到源代码顺序更靠后的元素。将每个组件放入自己的作用域，并设置 anchor-scope: --help-button，可以把查找范围限制在当前组件内。

.help-card {
  /* 同名锚点只在当前卡片内参与匹配。 */
  anchor-scope: --help-button;
}

常见问题

只写 anchor-name，提示框为什么没有跟着按钮走？

anchor-name 只是声明锚点，还需要定位元素的 position-anchor 或明确的 anchor() 关系，再提供 position-area 或 inset 位置。

position-area 和 anchor() 应该选哪个？

只需要表达“上方、下方、左侧、右侧”时优先用 position-area；需要精确读取按钮某条边、参与 calc() 或组合多个锚点时再用 anchor()。

提示框被按钮遮住时先查什么？

先查提示框是否为绝对或固定定位，再查 position-anchor 名称是否与 anchor-name 完全一致，最后检查锚点是否被 display: none 隐藏以及是否被重复组件的同名锚点抢占。

把按钮与提示框看成一个有边界的组件，先建立锚点关系，再选择位置表达方式，最后补兼容和视口策略，CSS anchor positioning 才能从“会对齐”变成可复用的布局方案。