浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

3aUAWVdC · 2025-2-26 22:45:50

从 Chrome 125 开始，支持了一个全新的 CSS 特性 - Anchor Positioning，翻译过来即是锚点定位。
在之前的文章中，我们较为系统的讲述了这个新特性的使用，感兴趣的可以翻开一下前文：抢先体验！超强大的 Anchor Positioning 锚点定位。
在本文中，我们将使用锚点定位，实现一个简化版本的 Popover 功能。下面，我们将一起一探究竟。
传统 Popover 功能

长话短说，在日常的前端需求开发中，有这么一种场景，我们需要 hover 某个具体元素，以弹出一个弹出层，像是这样：

如果我们将弹出层的 DOM 结构，写在某个具体的元素内部，譬如放在与被 Hover 元素同级。如果被 Hover 元素的祖先元素的某一层设置了 overflow: hidden，则可能会出现这种截断现象：

为了避免这种情况的发生，一般情况下，常见的解决方案都是会将弹出层的 DOM，插入到页面最外层的 <body> 容器之下，再通过实时计算位置，将该弹出层定位到被 hover 元素附近。这也就是类似于 popper.js、Tippy.js 等传统库所干的事情。
核心逻辑如下：

通过 JavaScript 获取触发元素的位置信息（getBoundingClientRect）
计算视口剩余空间（需考虑滚动位置、窗口尺寸等）
动态调整 Popover 位置（需处理边界碰撞、翻转逻辑）
添加 resize/scroll 事件监听器进行位置修正

其核心在于，通过 Javascript 动态计算当前 hover 元素的位置，将弹出层定位到当前 hover 元素附近合适的位置，并且处理好各种边界场景，这里很重要一点是强依赖于 Javascript 的计算。
因为传统的 CSS，是没有办法改变元素的定位父元素的能力的。
而有趣的是，全新的 CSS 特性 - Anchor Positioning 锚点定位就是为了解决这个问题的。
快速了解 Anchor Positioning 锚点定位

那，到底什么是 Anchor Positioning 锚点定位呢？我们通过一个 DEMO 快速上手。
假设我们在页面上有这么三个元素：按钮A、按钮B、被定位元素C，其中被 元素C 是一个插入到任意地方，且为绝对定位的元素，核心 CSS 代码如下：
<body> <div class="btn-a">按钮A</div> <div class="btn-b">按钮B</div> <div class="anchor">被定位元素C</div></div>.btn-a, .btn-b { // 高宽各类样式}.anchor { position: absolute;}现在，三个元素属于同级关系，且 C 元素是绝对定位，当前基于 body 进行绝对定位。
大致样式如下：

而锚点定位的属性的核心作用就是，能够改变元素定位的基准，增强元素的绝对定位的能力。Anchor Positioning（锚点定位）允许我们基于其它锚点元素的位置和尺寸去定位上下文，而不是传统意义上的基于父元素去进行绝对定位。
下面，我们利用锚点定位去实现，当两个按钮 A、B 被 Hover 的时候，让定位元素 C 基于当前被 Hover 的按钮元素进行绝对定位，核心 CSS 代码如下：
.btn-a { // 将元素声明为定位基准点，命名为 --btn-a anchor-name: --btn-a;}.btn-b { // 将元素声明为定位基准点，命名为 --btn-b anchor-name: --btn-b;}// 当元素被 hover 的时候，改变 C 元素的样式.btn-a:hover ~ .anchor { // 锚点绑定，建立元素与锚点的定位关系 position-anchor: --btn-a; // 基于新的锚点元素，设置元素的 left\top 属性 left: anchor(--btn-a center); top: anchor(--btn-a bottom); // 利用 transform 轻微调整定位，非核心代码 transform: translate(-50%, 5px);}// 同理，与上面做的事情一致，知识在 hover 按钮 B 时，重新设定锚点元素.btn-b:hover ~ .anchor { position-anchor: --btn-b; left: anchor(--btn-b center); top: anchor(--btn-b bottom); transform: translate(-50%, 5px);}.anchor { // 方便动图演示，增加元素过渡动画，非核心代码 transition: all .2s;}核心关注上面的 anchor-name、position-anchor、 anchor 几个属性，其作用和含义在注释中有说明，在下文还会再描述一次。
如此一来，我们就实现了动态改变 C 元素定位基准的能力，我们看看效果：

简单而言，我们利用锚点定位的能力，在 hover 按钮 A\B 的时候，把 C 元素定位在它们正下方。这个就是锚点定位的能力！
Anchor Positioning 锚点定位核心 API

（1）anchor-name：锚点定义

功能：将元素声明为定位基准点
语法：anchor-name: <dashed-ident>;
应用场景：触发元素、参考元素、动态定位源
/* 定义触发元素为锚点 */.trigger-btn { anchor-name: --menu-anchor;}（2）position-anchor：锚点绑定

功能：建立元素与锚点的定位关系
语法：position-anchor: <dashed-ident>;
注意：需配合定位属性（position: fixed/absolute）使用
.tooltip { position: fixed; position-anchor: --menu-anchor; /* 绑定到指定锚点 */}（3）anchor()：动态定位

功能：根据锚点位置计算坐标
语法：anchor(<anchor-name>? <anchor-side>)
方位参数：

垂直：top/center/bottom
水平：left/center/right
组合：top-left/bottom-right 等

.context-menu { /* 锚点右下角对齐 */ top: anchor(--ctx-anchor bottom); left: anchor(--ctx-anchor right);}.tooltip { /* 水平居中于锚点 */ left: anchor(center); right: anchor(center);}（4）anchor-size()：尺寸继承

功能：获取锚点元素的尺寸值
语法：anchor-size(<anchor-name>? <dimension>)
维度参数：width/height/block/inline
.popover { /* 继承锚点宽度 */ width: anchor-size(width); /* 最小高度为锚点高度的1.5倍 */ min-height: calc(anchor-size(height) * 1.5);}这里介绍了锚点定位中最为核心的几个属性，掌握了这几个属性，就可以应付大部分场景了。在我之前的一篇入门文章中，对它们也有一些更为详细的描述，感兴趣的同学，可以翻看：抢先体验！超强大的 Anchor Positioning 锚点定位
锚点定位的候补位置

还有一个非常重要的点，传统的 Popover 组件，一般都会有这么个功能 -- 智能边界处理。
我们以一个功能比较强大的 Popover 库 floating-ui 举例，其官网展示了如下的一个功能，当元素在滚动过程中，如果原本 Popover 弹窗被遮挡，会自动进行位置移动，将弹窗重新调整到可视区域，效果如下：

令人振奋的是，现在，CSS 的 Anchor Positioning 锚点定位同样支持这种 智能边界处理，在锚点定位中，我们称之为候补位置。
这里，我们主要借助两个锚点定位相关的属性完成锚点定位的候补位置 position-try-fallbacks 和 @position-try 规则。
@position-try 规则

@position-try 用于定义一个备选定位策略（一组定位规则），可以在多个元素中复用。它的语法类似于定义一个命名规则集合。
/* 语法示例：*/@position-try --strategy-name { /* 具体的定位规则 */ top: anchor(bottom); left: anchor(left);}关键点：

命名策略：每个 @position-try 规则需要唯一名称（如 --tooltip-below）。
独立作用域：策略内部的定位规则独立于元素自身的样式，仅在被调用时生效。

position-try-fallbacks 属性

position-try-fallbacks 用于在元素上指定备选定位策略的优先级顺序。浏览器会按顺序尝试这些策略，直到找到第一个可用的位置。
/* 语法示例：*/.element { position-try-options: --strategy1, --strategy2, --strategy3;}关键点：

顺序敏感：浏览器按列表顺序尝试策略，第一个可行的策略会被应用。
动态回退：如果所有策略均不可行，元素会回退到默认定位（或父容器约束）。

使用锚点定位实现候补位置

基于上述介绍，我们来实现一个基于锚点定位的候补位置。
假设我们如下结构，当前已经使用了锚点定位：
<body> <div class="btn">Reference</div> <div class="anchor">Popover弹窗元素</div></div>核心 CSS 如下：
.btn { anchor-name: --btn; border: 1px dashed #000; background: #ddd;}.anchor { position: absolute; position-anchor: --btn; left: anchor(--btn-a center); top: anchor(--btn-a bottom); transform: translate(-50%, 5px);}此时，两个元素都插入在 <body> 下面，但是 Popover 弹窗元素使用了 position-anchor: --btn 锚点定位，使其绝对定位的父元素是 .btn，并且，定位在按钮的下方，效果如下：

此时，我们只需要再借助 position-try-fallbacks 和 @position-try，实现候补位置：

@position-try 定义一个候补规则
position-try-fallbacks 引入候补规则

核心 CSS 代码如下：
.btn { anchor-name: --btn; border: 1px dashed #000; background: #ddd;}.anchor { position: absolute; position-anchor: --btn; left: anchor(--btn-a center); top: anchor(--btn-a bottom); transform: translate(-50%, 5px); position-try-fallbacks: --position-bottom;}@position-try --position-bottom { left: anchor(--btn center); bottom: anchor(--btn top); top: unset; margin-bottom: 10px;}这样，我们在滚动页面的过程中，如果弹窗 popover 有超出视窗，候补规则会自动生效，看看效果：

仔细观察，和上面利用 Javascript 库实现的智能定位，效果一致，只是此时，我们仅仅使用了寥寥几行 CSS 代码！Amazing！
综上所述，到今天，我们已经可以利用 CSS 锚点定位大致实现一个极简版的 Popover 弹窗，并且可以满足大部分场景。不得不感叹 CSS 确实愈发的强力，
当然，本文介绍的关于锚点定位的功能都是基于实现一个最小版本的 Popover 展开的，基于锚点定位的 API 和回退候补，还有更多有趣的内容，感兴趣的可以猛戳 MDN 进行了解：MDN - Anchor Positioning、MDN-Anchor Positioning @position try。
最后

好了，本文到此结束，一个非常有意思的 CSS 技巧，希望本文对你有所帮助 😃
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 -- iCSS前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。