CSS Anchor Positioning 锚点定位

CSS Anchor Positioning（CSSWG新特性/无需JS计算位置的tooltip/popover定位）：anchor()函数引用锚元素、anchor-name/position-anchor、inset-area/position-try-fallback自动翻转避免溢出 · 难度：入门 · +10XP

CSS Anchor Positioning —— 元素自动跟随另一个元素定位

做tooltip时，需要计算tooltip相对于触发按钮的位置。CSS Anchor Positioning让这件事变成声明式的——告诉浏览器谁是谁的锚点，浏览器自动计算位置。

基本用法

.tooltip {
  position: absolute;
  position-anchor: --myButton;          /* 指定锚点 */
  top: anchor(--myButton bottom);       /* tooltip的顶部=按钮的底部 */
  left: anchor(--myButton center);      /* tooltip的左=按钮的中心 */
}
.my-button {
  anchor-name: --myButton;             /* 定义为锚点 */
}

自动翻转防溢出

.tooltip {
  position: absolute;
  position-anchor: --btn;
  inset-area: top;              /* 优先放在上方 */
  position-try-fallbacks: bottom, left, right;  /* 上方溢出则尝试其他方向 */
}

动手练习

1. 基础练习：做一个始终跟随在按钮上方的tooltip。
2. 进阶应用：做一个自动换方向的tooltip——上方空间不够就自动翻转到下方。
3. 项目实战：用Anchor Positioning替换项目中用JS计算位置的dropdown和tooltip。