CSS 锚点定位实战

CSS 锚点定位（Anchor Positioning）让元素可以相对于另一个元素定位，终于不用 JS 计算坐标了。

基础用法

.trigger {
  anchor-name: --my-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

<button class="trigger">悬停我</button>
<div class="tooltip">我是提示框</div>

自动翻转

当空间不足时自动翻转方向：

.tooltip {
  position-area: top;
  position-try-fallbacks: flip-block, flip-inline;
}

实际价值

过去实现 Tooltip、Popover、下拉菜单，必须用 JavaScript 计算位置，处理边界情况极其繁琐。锚点定位把这些交给 CSS，代码量减少 80%。

浏览器支持在 2026 年已覆盖主流环境，是 CSS 又一项改变开发方式的特性。