CSS Anchor Positioning 深度实战：告别 JavaScript 定位计算

前言：定位的痛，前端人都懂#

做前端这些年，有一种需求你一定遇到过：把一个浮层精确地定位到某个元素旁边。

Tooltip、Popover、Dropdown、Context Menu……这些组件的核心难题从来不是”长什么样”，而是”放在哪”。

传统方案是什么？getBoundingClientRect() 拿坐标，手动算 top/left，还要处理滚动偏移、视口边界、resize 响应——一个 Tooltip 的定位逻辑写下来，比 Tooltip 本身的渲染逻辑还长。

于是我们用 Popper.js（现在叫 Floating UI），一个 26KB 的库，只为了解决”把 A 放到 B 旁边”这个需求。

2026 年了，CSS 终于给出了原生答案：Anchor Positioning。

一、核心概念：锚点 + 目标#

CSS Anchor Positioning 的心智模型极其简单：

1. 锚点元素（Anchor）：参考物，比如一个按钮
2. 目标元素（Target）：需要定位的东西，比如 Tooltip
3. 定位关系：目标相对于锚点的位置

1
/* 第一步：声明锚点 */
2
.trigger-button {
3
  anchor-name: --my-anchor;
4
}
5

6
/* 第二步：目标元素引用锚点 */
7
.tooltip {
8
  position: fixed;
9
  position-anchor: --my-anchor;
10

11
  /* 第三步：用 anchor() 函数定位 */
12
  bottom: anchor(top);
13
  left: anchor(center);
14
  translate: -50% 0;
15
}

就这么简单。没有 JavaScript，没有 getBoundingClientRect()，没有手动计算。浏览器帮你搞定一切，包括滚动、resize、甚至容器查询下的重排。

二、anchor() 函数：定位的核心#

anchor() 是整个 API 的灵魂。它接受一个参数，表示锚点元素的哪条边：

1
.tooltip {
2
  position: fixed;
3
  position-anchor: --btn;
4

5
  /* 把 tooltip 的顶部对齐到按钮的底部 */
6
  top: anchor(bottom);
7

8
  /* 把 tooltip 的左边对齐到按钮的中心 */
9
  left: anchor(center);
10
}

可用的关键词：

• 垂直方向：top、bottom、center
• 水平方向：left、right、center
• 逻辑属性：start、end、self-start、self-end
• 百分比：anchor(50%) 等价于 anchor(center)

1
/* 锚点 */
2
.btn {
3
  anchor-name: --btn;
4
}
5

6
/* 通用 tooltip 样式 */
7
.tooltip {
8
  position: fixed;
9
  position-anchor: --btn;
10
  background: #1a1a2e;
11
  color: white;
12
  padding: 8px 16px;
13
  border-radius: 8px;
14
  font-size: 14px;
15
  white-space: nowrap;
16
}
17

18
/* 上方 */
19
.tooltip[data-position="top"] {
20
  bottom: anchor(top);
21
  left: anchor(center);
22
  translate: -50% -8px;
23
}
24

25
/* 下方 */
26
.tooltip[data-position="bottom"] {
27
  top: anchor(bottom);
28
  left: anchor(center);
29
  translate: -50% 8px;
30
}
31

32
/* 左侧 */
33
.tooltip[data-position="left"] {
34
  right: anchor(left);
35
  top: anchor(center);
36
  translate: -8px -50%;
37
}
38

39
/* 右侧 */
40
.tooltip[data-position="right"] {
41
  left: anchor(right);
42
  top: anchor(center);
43
  translate: 8px -50%;
44
}

1
<button class="btn">Hover me</button>
2
<div class="tooltip" data-position="top">我在上面</div>

三、position-area：更语义化的定位#

如果你觉得手动设置 top/bottom/left/right 还是有点繁琐，position-area 提供了一种更直觉的写法：

1
.tooltip {
2
  position: fixed;
3
  position-anchor: --btn;
4
  position-area: top center;  /* 在锚点上方居中 */
5
}

position-area 用一个 3×3 的九宫格来描述位置：

1
top left      |  top center      |  top right
2
center left   |  center center   |  center right
3
bottom left   |  bottom center   |  bottom right

这比手动算 anchor() 更直觉，尤其适合快速原型开发：

1
/* Dropdown 菜单 */
2
.dropdown-menu {
3
  position: fixed;
4
  position-anchor: --dropdown-trigger;
5
  position-area: bottom span-left;  /* 下方，向左展开 */
6
  width: 200px;
7
}

span-left 表示从锚点中心向左展开，span-right 向右，span-all 两侧都展开。

四、position-try-fallbacks：自动回退，优雅降级#

这是 Anchor Positioning 最强大的特性之一。当首选位置放不下时，自动尝试备选位置。

以前用 JavaScript 实现这个逻辑，需要：

1. 计算首选位置
2. 检测是否超出视口
3. 如果超出，尝试翻转方向
4. 如果还是超出，尝试其他方向
5. 如果全部超出，选择一个”最不坏”的位置

现在一行 CSS：

1
.tooltip {
2
  position: fixed;
3
  position-anchor: --btn;
4
  position-area: top center;
5

6
  /* 首选上方，放不下就依次尝试：下方 → 右侧 → 左侧 */
7
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
8
}

1
@position-try --above-right {
2
  position-area: top right;
3
  width: 150px;  /* 回退时可以改变尺寸 */
4
}
5

6
@position-try --below-stretch {
7
  position-area: bottom span-all;
8
  max-height: 200px;
9
  overflow-y: auto;
10
}
11

12
.dropdown-menu {
13
  position: fixed;
14
  position-anchor: --trigger;
15
  position-area: bottom center;
16

17
  position-try-fallbacks: --above-right, --below-stretch;
18
}

五、实战案例：上下文菜单（Context Menu）#

来看一个完整的实战案例——右键菜单：

1
<div class="workspace" id="workspace">
2
  右键点击试试
3
</div>
4

5
<nav class="context-menu" id="contextMenu" popover>
6
  <button class="menu-item">📋 复制</button>
7
  <button class="menu-item">✂️ 剪切</button>
8
  <button class="menu-item">📄 粘贴</button>
9
  <hr />
10
  <button class="menu-item">🗑️ 删除</button>
11
</nav>

1
.context-menu {
2
  position: fixed;
3
  position-anchor: --cursor;
4
  position-area: bottom right;
5

6
  /* 四方向自动回退 */
7
  position-try-fallbacks:
8
    flip-inline,        /* 左侧展开 */
9
    flip-block,         /* 上方展开 */
10
    flip-block flip-inline; /* 左上角 */
11

12
  margin: 0;
13
  padding: 4px;
14
  border: 1px solid #e0e0e0;
15
  border-radius: 8px;
16
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
17
  min-width: 160px;
18

19
  /* 出场动画 */
20
  opacity: 0;
21
  transform: scale(0.95);
22
  transition: opacity 0.15s, transform 0.15s;
23

24
  &:popover-open {
25
    opacity: 1;
26
    transform: scale(1);
27
  }
28
}
29

30
.menu-item {
31
  display: block;
32
  width: 100%;
33
  padding: 8px 16px;
34
  text-align: left;
35
  border: none;
36
  background: none;
37
  border-radius: 4px;
38
  cursor: pointer;
39
  font-size: 14px;
40

41
  &:hover {
42
    background: #f0f0f0;
43
  }
44
}

1
// 唯一需要的 JS：设置锚点位置（因为鼠标位置是动态的）
2
const workspace = document.getElementById('workspace');
3
const menu = document.getElementById('contextMenu');
4

5
workspace.addEventListener('contextmenu', (e) => {
6
  e.preventDefault();
7

8
  // 用一个隐藏元素作为动态锚点
9
  const anchor = document.getElementById('cursorAnchor')
10
    || document.createElement('div');
11
  anchor.id = 'cursorAnchor';
12
  anchor.style.cssText = `
13
    position: fixed;
14
    left: ${e.clientX}px;
15
    top: ${e.clientY}px;
16
    width: 1px;
17
    height: 1px;
18
    anchor-name: --cursor;
19
  `;
20
  document.body.appendChild(anchor);
21

22
  menu.showPopover();
23
});

注意这个例子的精妙之处：

• 定位逻辑在 CSS 中，JS 只负责”把锚点放到鼠标位置”
• 四方向自动回退，菜单永远不会超出视口
• 结合 Popover API，关闭逻辑也是原生的
• 出场动画直接用 CSS transition，不需要动画库

六、anchor-size()：尺寸同步#

有时候目标元素的尺寸需要跟锚点保持一致。anchor-size() 函数可以读取锚点的宽高：

1
.dropdown-menu {
2
  position: fixed;
3
  position-anchor: --select-trigger;
4
  position-area: bottom center;
5

6
  /* 下拉菜单宽度跟触发器一样 */
7
  width: anchor-size(width);
8

9
  /* 或者设置最小宽度 */
10
  min-width: anchor-size(width);
11
  max-width: max(anchor-size(width), 300px);
12
}

这在做 Select 组件、Combobox 时特别有用——下拉面板的宽度自动跟输入框对齐，不需要 JavaScript 读取宽度。

七、多锚点定位：连线与标注#

一个目标元素可以引用多个锚点。这在做标注系统、连线图时非常有用：

1
.annotation-line {
2
  position: fixed;
3

4
  /* 从 A 点到 B 点画线 */
5
  top: anchor(--point-a top);
6
  left: anchor(--point-a right);
7
  bottom: anchor(--point-b bottom);
8
  right: anchor(--point-b left);
9
}

虽然这个场景相对高级，但它展示了 Anchor Positioning 的灵活性——它不只是做 Tooltip 的工具，而是一个通用的关系定位系统。

八、浏览器兼容性与渐进增强#

截至 2026 年 5 月：

主流浏览器已经全部支持，但如果需要兼容旧版本，推荐使用 @supports：

1
/* 渐进增强 */
2
.tooltip {
3
  /* 旧浏览器回退：固定位置 */
4
  position: fixed;
5
  top: var(--fallback-top);
6
  left: var(--fallback-left);
7
}
8

9
@supports (anchor-name: --test) {
10
  .tooltip {
11
    /* 新浏览器：Anchor Positioning */
12
    position-anchor: --btn;
13
    position-area: top center;
14
    position-try-fallbacks: flip-block;
15
    top: revert;
16
    left: revert;
17
  }
18
}

这样旧浏览器用 JavaScript 计算的 CSS 变量定位，新浏览器用原生 Anchor Positioning。零破坏性升级。

九、性能对比：为什么原生方案更快#

我在一个包含 100 个 Tooltip 的页面上做了性能测试：

核心原因：Anchor Positioning 在浏览器的布局阶段完成，不需要 JS → DOM 读取 → 重新计算 → 写入样式的往返。这避免了强制同步布局（Forced Synchronous Layout），在大量定位元素的场景下优势尤为明显。

十、最佳实践与避坑指南#

1
/* ❌ 太通用，容易冲突 */
2
anchor-name: --menu;
3

4
/* ✅ 带组件前缀 */
5
anchor-name: --header-nav-menu;
6
anchor-name: --user-profile-dropdown;

1
.scroll-container {
2
  position: relative;  /* 建立包含块 */
3
  overflow: auto;
4
}
5

6
.tooltip-in-scroll {
7
  position: absolute;  /* 跟随滚动容器 */
8
  position-anchor: --item;
9
  position-area: top center;
10
}

1
/* ❌ A 锚定到 B，B 又锚定到 A → 浏览器忽略 */
2
.a { anchor-name: --a; position-anchor: --b; }
3
.b { anchor-name: --b; position-anchor: --a; }

1
<button popovertarget="menu" style="anchor-name: --menu-btn">菜单</button>
2
<div id="menu" popover style="position-anchor: --menu-btn; position-area: bottom center;">
3
  <!-- 菜单内容 -->
4
</div>

总结#

CSS Anchor Positioning 不是一个”锦上添花”的特性，它是前端定位范式的根本性转变：

1. 从命令式到声明式：不再手动计算坐标，描述关系即可
2. 从 JS 到 CSS：定位逻辑回归样式层，关注点分离更彻底
3. 从库到原生：减少 26KB+ 依赖，性能更好
4. 从手动到自动：position-try-fallbacks 自动处理边界情况

如果你正在开发组件库或设计系统，现在就应该开始关注这个 API。2026 年主流浏览器已全部支持，是时候把 Floating UI 从你的 package.json 里移除了。

当然，对于已有项目的迁移不必急于一时——用 @supports 做渐进增强，新组件优先使用原生方案，旧组件按需迁移。

前端的发展趋势很明确：能用 CSS 解决的，就不要用 JavaScript。Anchor Positioning 是这个趋势的又一个有力证明。