CSS 锚点定位实战：Tooltip 与下拉菜单的浮层跟随、边缘翻转全流程

做浮层一直是个体力活。Tooltip、下拉菜单、气泡卡片，位置都得跟着某个按钮走，但页面一滚动、容器一缩放、文字一换行，坐标就全乱了。过去这类需求基本都交给 Floating UI 这类库，一个 Tooltip 组件光是边界判断和翻转策略就要写上百行。

CSS 锚点定位（Anchor Positioning）把这件事拉回了样式层：告诉浏览器“这个浮层属于那个元素”，位置关系、跟随更新、边缘翻转全部由浏览器负责。这篇文章从一个指标卡片的 Tooltip 开始，一路做到能和 popover 配合的下拉菜单。

一、先把三个关键词弄清楚

锚点定位的核心只有三个东西，理解它们之后剩下的都是排列组合。

1. anchor-name：给锚点起个名字。它的值是一个自定义标识符，必须以两个连字符开头，但注意它不是 CSS 变量，不会被 var() 读取，也不会参与继承。它只针对文档中的某个元素做标记，默认全局可见。

2. position-anchor：浮层认哪个锚点。写在浮层元素上，告诉它“你要跟着谁走”。

3. anchor()：把锚点某一边的坐标取出来。它可以出现在 top、left、inset-area 这些地方，参数是锚点的边：top、bottom、left、right、center，还可以带百分比。

三个词拼起来，一个最基本的 Tooltip 就出来了。

二、第一个版本：指标说明气泡

先看结构，注意这里没有任何坐标相关的 data 属性，也没有 JS 参与。

<div class="metric">
  <span class="metric__label">转化率</span>
  <button class="metric__help" aria-describedby="tip-conv">?</button>
  <span class="tip" id="tip-conv" role="tooltip">近 7 天完成支付的访客占比</span>
</div>

样式部分：

.metric {
  position: relative;
}

.metric__help {
  anchor-name: --tip;
  inline-size: 20px;
  block-size: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.tip {
  position: absolute;
  position-anchor: --tip;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
  margin-block-end: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #1f2933;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}

逐句拆一下。bottom: anchor(top) 是把气泡的下边缘对齐到按钮的上边缘；left: anchor(center) 加上 translate: -50% 做水平居中——这里的百分比是相对气泡自身宽度算的，所以气泡文案变长变短都不用改代码。最后用 margin-block-end 顶出 8px 的间距。

这套写法有个隐藏好处：锚点的位置变化不需要任何监听。按钮因为父容器换行而位移、页面滚动、字体加载后行高变化，气泡都会自己跟上。过去这几件事每一件都对应一个 ResizeObserver 或者滚动事件。

三、用 position-area 把五行压成一行

上面的 bottom + left + translate 组合其实很常用，规范里单独给它准备了一个简写属性：position-area。它把锚点周围划分成一个 3×3 的网格，你只要说清楚浮层要待在哪一格。

.tip {
  position: absolute;
  position-anchor: --tip;
  position-area: top;
  margin-block-end: 8px;
}

position-area: top 表示浮层放在锚点上方的那一格，未指定的另一个轴默认取 center，也就是自动水平居中。等价于前面那几行，但少写了一半代码。

如果只想垂直对齐、横向贴左，可以写成 position-area: top left。这套语法的好处是可读性很强，读代码的时候一眼就能看出浮层在锚点的哪个方位。

需要注意的是，两者不要混着写。同一个浮层里既有 position-area 又有 anchor() 时，按哪边生效要看层叠顺序，容易出玄学问题。选一种风格贯穿整个项目。

四、靠近视口边缘时自动翻转

这才是锚点定位真正省事的地方。老方案里，翻转意味着每一帧都要算 getBoundingClientRect，然后给元素加一个 data-placement 属性。

新方案用 @position-try 定义备选位置，用 position-try-fallbacks 声明尝试顺序。

@position-try --tip-below {
  bottom: auto;
  top: anchor(bottom);
  margin-block: 8px 0 0;
}

.tip {
  position-try-fallbacks: --tip-below;
}

这段代码的意思很直白：默认放上面，如果上面放不下，就翻到下面试试。浏览器会自己去判断“放不下”这件事，包括浮层高度超出视口、被滚动容器裁切等情形。

@position-try --tip-right {
  bottom: auto;
  top: anchor(center);
  left: anchor(right);
  translate: 0 -50%;
  margin-inline-start: 8px;
}

.tip {
  position-try-fallbacks: --tip-below, --tip-right, --tip-left;
}

多个候选按书写顺序尝试，第一个能放下的就采用。如果连关键字都想省掉，规范还提供了一组内置值：flip-block、flip-inline、flip-start。像这种只需要上下翻转的场景，一句 position-try-fallbacks: flip-block 就够了，不用自己写 @position-try。

还有一个容易被忽略的属性：position-try-order。当浮层既能在上面也能在下面时，默认按声明顺序取第一个。如果设成 position-try-order: most-height，浏览器会优先选择能让浮层展示得更完整的那一侧。长内容的下拉菜单用这个值效果很明显。

五、让下拉菜单和触发按钮等宽

工具栏里的“导出”按钮点开一个菜单，菜单宽度如果和按钮一致，视觉上会整齐很多。以前要么写死像素值，要么用 JS 把 offsetWidth 同步过去。

.menu {
  width: anchor-size(width);
}

anchor-size() 会读取当前 position-anchor 指定元素的实际尺寸，除了 width 还有 height、block、inline。按钮上的文字变长、图标变大，菜单会自己跟上。

如果同一个浮层需要参考另一个锚点的尺寸，也可以写成 anchor-size(--other width) 的形式显式指定。

六、同一个锚点名被多个组件复用时怎么办

页面里往往不止一个指标卡片，每个卡片各有一个问号按钮。如果它们都写 anchor-name: --tip，浏览器只会认最后一个，其余气泡的位置全都会跑偏。

最早的解决办法是给每个组件拼一个唯一名字，像 --tip-1、--tip-2，但这在组件化项目里几乎不可行。现在的做法是用 anchor-scope：

.metric {
  anchor-scope: --tip;
}

.metric__help {
  anchor-name: --tip;
}

anchor-scope 写在某个容器上，表示这个名字只在这个容器子树里可见。于是每个卡片内部都可以放心使用同一个名字，互不干扰。这一条解决了锚点定位在组件库中最大的落地障碍。

七、和 popover 配合，顺手拿到点击外部关闭

Tooltip 是悬浮显示，下拉菜单则需要点击打开、点击外部关闭、按 Esc 关闭。这三件事 popover 属性自带，配合锚点定位正好补齐位置这一环。

<button class="toolbar__btn" popovertarget="export-menu">导出</button>

<div id="export-menu" popover class="menu">
  <a href="/export.csv" rel="external nofollow" >导出 CSV</a>
  <a href="/export.xlsx" rel="external nofollow" >导出 Excel</a>
</div>

样式这边有两个坑要先绕过。

第一，popover 元素会被浏览器提升到顶层，默认样式里带 position: fixed 和 inset: 0。如果不把 inset 重置掉，浮层会被拉满整个视口。第二，margin: auto 也需要显式覆盖，否则会和锚点定位算出来的位置打架。

.toolbar__btn {
  anchor-name: --export;
}

.menu {
  position: fixed;
  inset: auto;
  margin: 0;
  position-anchor: --export;
  top: anchor(bottom);
  left: anchor(left);
  width: anchor-size(width);
  position-try-fallbacks: flip-block;
}

再加上入场动画。因为 popover 开关时会在 display: none 和显示状态之间切换，直接写过渡是不会生效的，需要 allow-discrete 配合 @starting-style：

.menu {
  opacity: 0;
  translate: 0 -6px;
  transition:
    opacity 0.18s ease,
    translate 0.18s ease,
    display 0.18s allow-discrete,
    overlay 0.18s allow-discrete;
}

.menu:popover-open {
  opacity: 1;
  translate: 0 0;
}

@starting-style {
  .menu:popover-open {
    opacity: 0;
    translate: 0 -6px;
  }
}

overlay 这个属性的作用常被忽略：它保证浮层在关闭动画播完之前仍然留在顶层，不至于动画中途被后面的内容盖住。没有它，关闭时会出现一瞬间的“闪切”。

八、兼容性和降级

写这篇的时候，Chrome 从 125 版本开始已经稳定支持锚点定位，Safari 26 也跟上了，Firefox 还在推进中。所以支持面决定了你能不能直接用。

内部管理系统、Electron 应用、Chrome 独占的看板类页面，可以放心大胆用，anchor-scope 这类偏新的属性也一样能用。面向大众的 C 端页面，建议整体包一层特性检测做渐进增强：

@supports (anchor-name: --probe) {
  .tip {
    position-anchor: --tip;
    position-area: top;
  }
}

不支持时，浮层退回成普通的绝对定位，靠 top、left 给一个合理的初始位置，再用 @supports not 补一套简单偏移。总比位置全乱要强。

九、实际踩过的几个坑

锚点消失后浮层会失去参考。如果 anchor-name 所在的元素被 display: none 掉了，anchor() 会退化成 auto，浮层跑到一个很意外的地方。要么用 visibility: hidden 代替，要么把浮层一起隐藏。

普通绝对定位的浮层仍会被祖先裁切。锚点定位只解决位置问题，不解决层叠上下文问题。如果浮层的祖先有 overflow: hidden，它还是会被切掉。这也是建议把下拉菜单改成 popover 的原因——顶层渲染天然免疫裁切。

--tip 不是变量。我见过有同学写 var(--tip) 去取锚点，结果当然是拿不到任何东西。锚点名是标识符，不是自定义属性。

浮层自身也需要定位声明。只在浮层上写 position-anchor 是不够的，position 必须显式设成 absolute 或 fixed，否则后面的定位属性全都无效。

百分比写法要留意参照物。在 translate 里的百分比参照浮层自身尺寸，在 anchor() 里的百分比参照锚点尺寸，两者语义不同，混用时容易算错。

十、什么时候值得切换到锚点定位

我的判断标准比较简单：如果一个浮层组件里，有超过三十行代码是在算坐标、监听尺寸和做边界判断，那就值得换。锚点定位把这类逻辑彻底删掉了，组件里只剩下“我在锚点的哪一边”这一条信息。

至于要不要保留 JS 降级路径，取决于支持面。如果目标用户的浏览器版本可控，那就直接交给 CSS；如果需要覆盖老浏览器，配合 @supports 做渐进增强，用最少的代码换取新浏览器上的完整体验，也比全量引入一个定位库划算。