从弹出菜单的定位难题说起
在网页中，弹出菜单、工具提示、下拉选择框这类浮层元素，几乎总是需要紧贴某个触发按钮显示。以商品卡片上的“更多操作”按钮为例，点击后弹出的菜单应当出现在按钮下方，并且左边缘与按钮对齐。这个需求看似简单，但在传统 CSS 中并不容易实现。
绝对定位可以把元素放到页面任意位置，但它只能相对最近的定位祖先（containing block）定位，无法直接说“放在这个按钮的下面”。工程上通常的做法是：给按钮和浮层包一层相对定位的容器，或者用 JavaScript 在运行时读取按钮的 getBoundingClientRect()，再手动设置浮层的 top 和 left。前者要求 DOM 结构必须嵌套，后者则引入了脚本依赖和额外的布局计算。
CSS Anchor Positioning 正是为了解决这类“元素相对另一个元素定位”的问题而设计的。它允许一个绝对定位的元素（称为定位元素）以页面上的其他元素（称为锚点）为参照，设置自己的位置和尺寸。更重要的是，它还提供了一套纯 CSS 的回退机制，当默认位置放不下时，可以自动尝试其他位置。本文以弹出菜单为例，说明这套 API 的核心机制，以及为什么回退机制必不可少。
锚点的建立：anchor-name 与 position-anchor
要让一个元素成为锚点，需要给它一个名字。anchor-name 属性接受一个以双短横线开头的自定义标识符，类似 CSS 变量。例如：
.more-button {
anchor-name: --menu-anchor;
}此时 .more-button 就成为了一个名为 --menu-anchor 的锚点。接下来，把浮层元素与这个锚点关联起来，可以使用 position-anchor 属性：
.menu {
position: absolute;
position-anchor: --menu-anchor;
}这种通过 position-anchor 建立的关联称为“隐式锚点”，因为后续使用 anchor() 函数时，可以省略锚点名称，默认引用 position-anchor 指定的锚点。另一种方式是“显式锚点”，直接在 anchor() 函数中写出锚点名称，例如 top: anchor(--menu-anchor bottom)。显式写法适合一个元素同时锚定多个锚点的场景，比如一个浮层需要横跨两个按钮。
注意，position-anchor 只是建立了引用关系，并不会自动设置浮层的位置。真正决定浮层放在哪里的，是 anchor() 函数和 position-area 属性。
用 anchor() 函数精确控制边缘
anchor() 函数用于在 top、right、bottom、left 等定位属性中，引用锚点的某条边缘。它的语法是 anchor(<anchor-name>? <anchor-side>)，其中 <anchor-side> 可以是 top、right、bottom、left、inside、outside 等。
对于弹出菜单，我们希望菜单的顶部对齐按钮的底部，菜单的左边对齐按钮的左边。可以这样写：
.menu {
position: absolute;
position-anchor: --menu-anchor;
top: anchor(bottom);
left: anchor(left);
}这里 top: anchor(bottom) 表示把菜单的 top 边缘放在锚点的 bottom 边缘处，left: anchor(left) 表示把菜单的 left 边缘放在锚点的 left 边缘处。这样菜单就出现在按钮正下方，左对齐。
anchor() 函数还可以配合 calc() 使用，实现微调。例如，让菜单与按钮之间留出 8px 间隙：
.menu {
top: calc(anchor(bottom) + 8px);
}如果希望菜单在按钮上水平居中，可以使用 justify-self: anchor-center。这个值专门用于将定位元素相对于锚点居中。
anchor() 函数提供了像素级的控制，但需要分别设置 top 和 left，而且当按钮位置变化时（比如滚动），浮层会自动跟随，因为锚点位置是实时计算的。
position-area：基于九宫格的简捷定位
anchor() 函数虽然精确，但写起来比较繁琐。对于常见的“放在锚点上方、下方、左侧、右侧”这类需求，CSS Anchor Positioning 提供了 position-area 属性，它基于一个以锚点为中心的九宫格来定位。
九宫格的划分是：锚点位于中心，周围有 8 个区域，分别对应 top、right、bottom、left 以及四个角。position-area 接受一个或两个关键字，例如 top 表示“锚点上方并水平居中”，right span-bottom 表示“锚点右侧并垂直拉伸到底部”。
对于弹出菜单，最简单的写法是：
.menu {
position: absolute;
position-anchor: --menu-anchor;
position-area: bottom;
}这等价于把菜单放在锚点的正下方，水平居中。如果希望左对齐，可以写成 bottom left。position-area 内部会解析成一个具体的矩形区域，然后自动设置 top、left 等值。它比 anchor() 更简洁，但灵活性稍低，适合位置相对固定的场景。
position-area 和 anchor() 可以同时使用吗？规范允许，但两者会互相影响。如果同时设置了 top: anchor(bottom) 和 position-area: bottom，position-area 会覆盖 top 和 left 的设置。因此实际使用时通常二选一。
为什么需要 fallback：溢出与空间不足
现在，弹出菜单已经能出现在按钮下方了。但真实页面中，按钮可能靠近视口底部。如果菜单高度较大，它就会超出视口底部，用户看不到完整菜单。传统 JS 方案会在打开时检测空间，如果下方不够就改到上方。CSS Anchor Positioning 用 position-try-fallbacks 属性实现同样的逻辑。
position-try-fallbacks 接受一个或多个备选位置，当默认位置导致定位元素溢出其包含块或视口时，浏览器会按顺序尝试这些备选位置，直到找到一个不溢出的位置。如果所有备选都溢出，则使用第一个。
最简单的备选是使用内置的翻转关键字。flip-block 会在块方向（通常是上下）翻转，flip-inline 会在行内方向（通常是左右）翻转，也可以组合使用。例如：
.menu {
position: absolute;
position-anchor: --menu-anchor;
position-area: bottom;
position-try-fallbacks: flip-block;
}当菜单默认在按钮下方，但下方空间不足时，flip-block 会让它翻转到按钮上方。这个关键字背后相当于定义了一个备选位置：position-area: top。
如果翻转不能满足需求，还可以用 @position-try 规则自定义备选位置。例如，子菜单默认显示在菜单右侧，如果右侧空间不足，就移动到下方：
.submenu {
position: absolute;
position-anchor: --submenu-anchor;
position-area: right span-bottom;
position-try-fallbacks: --bottom;
}
@position-try --bottom {
position-area: bottom;
}这里 @position-try --bottom 定义了一个名为 --bottom 的备选位置，它把 position-area 改为 bottom。当默认位置溢出时，浏览器会尝试使用这个备选。
position-try-fallbacks 还可以与 position-try-order 配合，后者可以指定备选位置的尝试顺序，比如“哪个位置空间最大优先”。
回退机制的运行原理：从布局到选择
当浏览器渲染一个带有 position-try-fallbacks 的定位元素时，它并不是简单地在多个位置之间切换，而是经历一个“尝试-选择”的过程。这个过程发生在布局阶段，具体步骤大致如下：
- 浏览器先按照默认位置（如
position-area: bottom）计算定位元素的几何位置。 - 检查该位置是否会导致元素溢出其包含块或视口。判断标准是元素的可视区域是否完全在包含块内。
- 如果溢出，则依次尝试
position-try-fallbacks列表中的每个备选位置，对每个位置重复上述检查。 - 找到第一个不溢出的位置后，就使用该位置进行布局。如果全部溢出，则使用第一个备选位置（或默认位置，取决于规范）。
这个过程是纯 CSS 的，不需要 JavaScript 参与。浏览器会在布局时自动完成，因此性能开销很小。
下面的流程图展示了这个决策过程：
flowchart TD
A[计算默认位置] --> B{是否溢出?}
B -- 否 --> C[使用默认位置]
B -- 是 --> D[尝试下一个备选位置]
D --> E{是否溢出?}
E -- 否 --> F[使用该备选位置]
E -- 是 --> G{还有备选?}
G -- 是 --> D
G -- 否 --> H[使用第一个备选位置]
C --> I[完成布局]
F --> I
H --> I
需要注意的是，position-try-fallbacks 的备选位置不仅可以是 position-area，还可以是 anchor() 函数、margin、inset 等其他属性。实际上，@position-try 规则内部可以包含任意定位相关的属性，浏览器在尝试时会临时应用这些属性，然后检查溢出。
与传统 JS 定位方案的对比
在 CSS Anchor Positioning 出现之前，实现弹出菜单定位通常有三种方式：
- 嵌套容器：把浮层放在按钮的父元素内，用绝对定位相对父元素定位。这种方法要求 DOM 结构必须嵌套，且父元素不能有
overflow: hidden等裁剪属性，否则浮层可能被裁剪。 - JavaScript 计算位置：监听按钮点击，调用
getBoundingClientRect()获取按钮位置，然后设置浮层的top和left。这种方法灵活，但需要处理滚动、窗口大小变化、按钮位置变化等事件，代码量较大，而且容易产生强制同步布局（如果读取位置后立即写入样式）。 - 第三方库：如 Popper.js，封装了位置计算和翻转逻辑，但引入了额外依赖和运行时开销。
CSS Anchor Positioning 将定位逻辑交给浏览器，优势在于：
- 无需 JavaScript，减少脚本执行时间。
- 浮层会自动跟随锚点滚动和移动，无需手动监听。
- 回退机制由浏览器原生支持，逻辑更可靠。
但它也有局限。目前浏览器支持有限，Chrome 125 起支持，Firefox 和 Safari 的支持情况需要查阅最新数据。此外，position-area 和 position-try-fallbacks 的动画支持还不完善，position-area 目前无法过渡。
下面是一个对比表格：
| 方案 | 定位依据 | 回退机制 | 运行时成本 | 浏览器兼容性 |
|---|---|---|---|---|
| 嵌套容器 | 相对父元素 | 需手动切换类名 | 低 | 所有浏览器 |
| JavaScript 计算 | getBoundingClientRect | 需手动检测空间 | 中，可能引起强制同步布局 | 所有浏览器 |
| CSS Anchor Positioning | 锚点元素 | position-try-fallbacks | 低，浏览器原生计算 | Chrome 125+，其他有限 |
适用边界与浏览器支持
CSS Anchor Positioning 并非所有场景都适用。它要求定位元素必须是绝对定位（position: absolute 或 fixed），并且锚点必须在 DOM 中可访问。对于弹窗、工具提示、下拉菜单这类浮层，它非常合适；但对于需要复杂交互逻辑的定位（如拖拽、动态计算），可能仍需 JavaScript。
浏览器支持方面，根据 Chrome 团队的文章，Chrome 125 开始支持该 API，但语法在 Chrome 129 中有所更新（inset-area 改名为 position-area，position-try-options 改名为 position-try-fallbacks）。Firefox 和 Safari 的支持情况需要查阅 caniuse 等最新数据，但截至资料发布时，支持仍有限。
因此，在生产环境中使用前，需要进行特性检测。可以使用 @supports 来检测 anchor-name 属性：
@supports (anchor-name: --foo) {
.menu {
position-area: bottom;
position-try-fallbacks: flip-block;
}
}如果不支持，则回退到传统的 JS 定位方案。
总结：从定位到回退的完整机制
CSS Anchor Positioning 通过 anchor-name 和 position-anchor 建立锚点关系，通过 anchor() 函数和 position-area 设置位置，通过 position-try-fallbacks 提供回退。这套机制将浮层定位从 JavaScript 中解放出来，让浏览器原生处理位置计算和溢出检测。
回退机制是这套 API 的核心价值之一，它解决了浮层在视口边缘时的自适应问题。理解其运行原理，有助于开发者写出更健壮的浮层组件，并在浏览器支持成熟时平滑迁移。
对于当前的前端工程，建议在支持该 API 的浏览器中逐步采用，同时保留 JS 回退，以兼顾兼容性和用户体验。