CSS 锚点定位实战：不写一行 JS，做出会自己躲开屏幕边缘的浮层

做过浮层的同学大概都有过这种体验：一个下拉菜单，正常展开没问题，但只要按钮靠近屏幕底部，菜单就被切掉半个。于是只能自己写一段计算逻辑，`getBoundingClientRect()` 拿坐标，判断剩余空间，翻转到上方，再监听 scroll 和 resize 重算。代码一百多行，还总会在某个边角场景里翻车。

CSS 锚点定位（CSS Anchor Positioning）就是来收拾这个烂摊子的。它让一个绝对定位元素直接”挂”到另一个元素上，并且浏览器会在每次布局时重新算位置——滚动、缩放、容器尺寸变化，全都自动跟上。配合 Popover API，连开关状态都不用 JS 管。

下面用一个真实会遇到的场景，从头走一遍。

先明确它解决的是哪一类问题

锚点定位不是万能的，它专门对付一类需求：某个元素的位置依赖另一个元素的实时位置。典型的就是 tooltip、下拉菜单、气泡卡片、浮动标签、连线指示点。

以前这类需求用 JS 做，痛点集中在三处：

• 首次渲染和位置更新之间存在闪动，因为 JS 要等布局完成才能读坐标；
• 滚动容器嵌套时坐标换算极其麻烦，`offsetParent` 一环套一环；
• 翻转（flip）和边界推挤（shift）逻辑要自己写，还很难写全。

锚点定位把这三件事全部交给布局引擎。你只需要声明”我挂在哪、朝哪个方向、装不下时往哪躲”。

最小可跑的例子：一个 Popover 气泡

先写出结构。注意这里没有任何 JS：

<button class="share-btn" popovertarget="share-card">分享</button>

<div id="share-card" popover class="share-card">
  <p>把这个页面发给同事</p>
  <button>复制链接</button>
</div>

`popovertarget` 指向的 id 元素带 `popover` 属性后，浏览器自动处理显示隐藏、点击外部关闭、按 Esc 关闭。这一步本身就已经省掉不少 JS 了。

接下来是关键的 CSS：

/* 1. 给按钮起一个锚点名 */
[popovertarget="share-card"] {
  anchor-name: --share-anchor;
}

/* 2. 让气泡认领这个锚点 */
.share-card {
  position: fixed;
  inset: auto;          /* 必须写，见下文解释 */
  margin: 0;
  position-anchor: --share-anchor;

  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 10px;

  width: 260px;
  padding: 14px 16px;
  border: 1px solid #dfe4ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 32px rgb(15 23 42 / 0.16);
}

就这么几行，气泡已经会老老实实贴在按钮正下方居中，并且跟着按钮滚动、跟着窗口缩放，不需要一行监听代码。

逐条拆开看

anchor-name 与 position-anchor

`anchor-name` 是给”被挂靠的元素”贴的标签，值必须是自定义标识符，也就是以 `–` 开头的名字。`position-anchor` 写在浮层上，声明它要用哪个锚点。

这两个属性之所以要分开写、还要求名字唯一，是因为页面里同时存在多个浮层时，浏览器必须能明确知道谁挂谁。同一个 `anchor-name` 落在两个元素上会产生歧义，结果往往不是”随便挑一个”，而是直接不生效。给列表里的每一行都生成浮层时，记得用不同的名字，或者用后面提到的 `anchor-scope` 做隔离。

anchor() 函数

`anchor(bottom)` 的意思是”锚点元素下边缘的位置”。它可以出现在 `top`、`left`、`right`、`bottom`、`width`、`height` 这些属性的值里，也能参与 calc 运算：

top: calc(anchor(bottom) + 8px);

常用的取值有 `top`、`bottom`、`left`、`right`、`center`，以及百分比。`anchor(center)` 取的是锚点在对应轴上的中点，做水平居中特别好用。

有一个细节容易踩：anchor() 量的是锚点元素的边框盒边缘。如果按钮本身有 12px 的 padding 和 1px 的边框，`anchor(bottom)` 给的是包含 border 的那条线，不是内容区的底边。想贴着视觉中心对齐，多半还得配合一点 translate 微调。

inset: auto 这一行不能省

Popover 元素在浏览器默认样式里带的是 `inset: 0` 和 `margin: auto`，目的是让它默认居中在视口。这两个声明会跟你写的 `top` / `left` 打架，导致浮层跑到左上角或者继续赖在屏幕中央。

我最初就是漏了这一行，盯着一个”完全不听话”的气泡排查了十几分钟，最后才发现是 UA 样式在作祟。所以记住：只要用了锚点定位，第一件事就是 `inset: auto; margin: 0;`。

装不下怎么办：position-try-fallbacks

这才是真正惊艳的部分。当浮层按主方向放不下时，浏览器会依次尝试候选方案：

@position-try --menu-above {
  top: auto;
  bottom: calc(anchor(top) + 8px);
  left: anchor(center);
  translate: -50% -10px;
}

@position-try --menu-left {
  top: anchor(top);
  left: auto;
  right: calc(anchor(left) - 10px);
  translate: 0 0;
}

.share-card {
  position-try-fallbacks: --menu-above, --menu-left;
}

浏览器从第一个开始试，哪个能完整放下就用哪个，全都不行就用原始位置。整个过程在布局阶段完成，没有闪烁，也没有 JS 参与。

在 `@position-try` 块里，建议把 `top` / `bottom` / `left` / `right` 四个方向都显式写清楚，该设 auto 的就设 auto。只写一半、指望基础样式兜底，很容易出现两个方向同时生效、尺寸被拉伸的情况。

让浮层跟着锚点一起消失

如果按钮在滚动容器里，滚出视野后浮层还会飘在外面。加一行：

.share-card {
  position-visibility: anchors-visible;
}

锚点不可见时，浮层自动隐藏。它的另一个值 `no-overflow` 则用于处理浮层自身被裁剪的情况。这两个值比手动监听 IntersectionObserver 省事太多。

完整案例：表格行尾的”更多”菜单

表格是最考验浮层的场景——最后一行的按钮离屏幕底部很近，最右侧一列的按钮离右边缘很近，两头都可能溢出。

<tr>
  <td>订单 #10241</td>
  <td><button popovertarget="row-menu">更多</button></td>
</tr>

<div id="row-menu" popover>
  <button>查看详情</button>
  <button>复制订单号</button>
  <button>取消订单</button>
</div>

[popovertarget="row-menu"] {
  anchor-name: --row-anchor;
}

#row-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  position-anchor: --row-anchor;
  position-visibility: anchors-visible;
  position-try-fallbacks: --above-right, --left-top, --above-left;

  top: calc(anchor(bottom) + 6px);
  right: anchor(right);

  width: 176px;
  padding: 6px;
  border: 1px solid #e3e7ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgb(15 23 42 / 0.14);
}

#row-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  font: inherit;
}

@position-try --above-right {
  top: auto;
  bottom: calc(anchor(top) + 6px);
  left: auto;
  right: anchor(right);
}

@position-try --left-top {
  top: anchor(top);
  bottom: auto;
  right: calc(anchor(left) + 6px);
  left: auto;
}

@position-try --above-left {
  top: auto;
  bottom: calc(anchor(top) + 6px);
  right: auto;
  left: anchor(right);
}

这里用了 `right: anchor(right)` 让菜单右边缘跟按钮右边缘对齐，而不是用 translate 去拉宽度。好处是翻转时不用重新算偏移，逻辑更干净。

三个候选方案的优先级是：先试”上方右对齐”，再试”左侧顶端对齐”，最后试”上方左对齐”。实际跑起来，无论按钮在表格哪个角落，菜单都能找到落脚的地方。

几个只有真写过才会遇到的坑

锚点元素不能是 display: none。 被隐藏的元素没有布局盒，自然也没有可锚定的边缘。如果按钮是在某种状态下才出现的，浮层会失去参考点。这种情况建议用 `visibility: hidden` 配合 `position-visibility` 处理。

列表里同一个名字反复出现。 循环渲染 20 行，每行一个按钮，如果都写 `anchor-name: –row-anchor`，浏览器无法判断该挂到哪一行。`anchor-scope` 可以限定锚点名的可见范围，让每个浮层只看到自己所在那一片区域的锚点：

.row {
  anchor-scope: --row-anchor;
}

anchor-size() 用来做尺寸同步。 有时候希望面板宽度跟触发按钮一样，或者最小宽度跟随锚点：

.panel {
  width: anchor-size(--filter-anchor width);
  min-height: anchor-size(--filter-anchor height);
}

这比用 JS 读 `offsetWidth` 再写回去可靠得多，而且窗口变化时自动更新。

不要再用 transform 做定位。 在锚点定位出现之前，很多人习惯用 `transform: translate(-50%, 0)` 做水平居中。现在优先考虑 `justify-self: anchor-center`，语义更直白，也不会和后续的动画 transform 冲突。

怎么安全地推向生产

截至写这篇文章时，Chrome 和 Edge 从 125 版本开始已经完整支持锚点定位，Safari 在近期的版本中也跟上了，Firefox 相对滞后。所以渐进增强是必须的。

好消息是：Popover 本身的降级非常自然。在还不支持锚点定位的浏览器里，气泡会退回浏览器默认的”视口居中”位置，虽然不贴着按钮，但功能完全可用、不会错位到屏幕外。

如果你希望降级时更可控，可以用特性查询做兜底：

@supports not (position-anchor: --x) {
  .share-card {
    inset: auto 16px 16px auto;
    margin: 0;
    translate: none;
    width: min(320px, calc(100vw - 32px));
  }
}

这样老浏览器里浮层会老老实实贴在右下角，像一个普通的浮窗，视觉上依然体面。

写在最后

锚点定位最打动我的地方，不是”少写了几行代码”，而是它把一件本来属于运行时的事情挪回了布局阶段。位置计算从”我猜浏览器什么时候渲染完了”变成”浏览器自己知道”，这条思路上的转变，带来的稳定性提升远比代码量的减少更值钱。

如果你的项目里还有那种靠 scroll 监听 + getBoundingClientRect 硬撑的浮层组件，挑一个改动最小的先试试替换。你会发现在滚动容器嵌套、虚拟列表这类以前最容易出问题的地方，它反而表现得最稳。