CSS Anchor Positioning API 简介

CSS Anchor Positioning API 可让您以原生方式将元素相对于其他元素(称为“锚点”)放置,从而彻底改变网页开发。此 API 简化了许多界面功能(例如菜单和子菜单、提示、选择内容、标签、卡片、设置对话框等)的复杂布局要求。借助浏览器内置的锚点定位功能,您无需依赖第三方库即可构建分层界面,这开启了一个充满创意的世界。

Chrome 125 中提供锚点定位功能。

浏览器支持

  • Chrome:125。 <ph type="x-smartling-placeholder">
  • 边缘:125。 <ph type="x-smartling-placeholder">
  • Firefox:不支持。 <ph type="x-smartling-placeholder">
  • Safari:不支持。 <ph type="x-smartling-placeholder">

来源

核心概念:锚点和已定位的元素

此 API 的核心在于锚点已定位的元素之间的关系。锚点是使用 anchor-name 属性指定为参考点的元素。定位元素是指相对于锚点放置的元素。该元素使用 position-anchor 属性或者在定位逻辑中明确使用 anchor-name

<ph type="x-smartling-placeholder">
</ph>
锚定元素和已定位的元素。

设置锚点

创建锚点非常简单。将 anchor-name 属性应用于所选元素,并为其分配唯一标识符。此唯一标识符前面必须加上双短划线,与 CSS 变量很相似。

.anchor-button {
    anchor-name: --anchor-el;
}

分配锚点名称后,.anchor-button 将充当锚点,已准备好指导其他元素的放置。您可以通过以下两种方式之一将此锚点连接到其他元素:

隐式锚点

将锚点连接到另一个元素的第一个方法是使用隐式锚点,如以下代码示例所示。position-anchor 属性会添加到您想要与锚点关联的元素中,并将锚点的名称(在本例中为 --anchor-el)作为值。

.positioned-notice {
    position-anchor: --anchor-el;
}

借助隐式锚点关系,您可以使用 anchor() 函数定位元素,而无需在其第一个参数明确指定锚点名称。

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

显式锚点

或者,您也可以直接在锚点函数中使用锚点名称(例如 top: anchor(--anchor-el bottom)。这称为显式锚点,如果您希望锚定到多个元素,会非常方便(请继续阅读示例)。

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

相对于锚点定位元素

<ph type="x-smartling-placeholder">
</ph>
具有物理特性的锚点定位图。

锚点定位基于 CSS 绝对定位构建。要使用定位值,您需要向已定位的元素添加 position: absolute。然后,使用 anchor() 函数应用定位值。例如,如需将某个锚定元素放置在锚定元素的左上角,请使用以下定位方法:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}
<ph type="x-smartling-placeholder">
</ph>
已定位元素的边缘定位示意图。

现在,您已将一个元素锚定到另一个元素,如下所示:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
基本锚点演示。

演示的屏幕截图。

如需对这些值使用逻辑定位,等效项如下所示:

  • top = inset-block-start
  • left= inset-inline-start
  • bottom = inset-block-end
  • right= inset-inline-end

使用 anchor-center 将已定位的元素居中

为了更轻松地将锚定位置的元素相对于其锚点居中,我们推出了一个名为 anchor-center 的新值,它可与 justify-selfalign-selfjustify-itemsalign-items 属性搭配使用。

此示例通过使用 justify-self: anchor-center 使已定位的元素在其锚点之上居中,对上一个元素进行了修改。

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
使用 justify-center 居中的锚点演示。

演示的屏幕截图。

多个锚点

元素可绑定至多个锚点。这意味着,您可能需要设置相对于多个锚点定位的位置值。为此,请使用 anchor() 函数,并在第一个参数中明确指出您要引用的锚点。在以下示例中,已定位元素的左上角锚定到一个锚点的右下角,已定位元素的右下角锚定到第二个锚点的左上角:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
显示多个锚点的演示。

演示的屏幕截图。

包含 inset-area 的位置

除了绝对定位的默认方向定位之外,锚定 API 中还包含一个名为边衬区的新布局机制。

插入区域可让您轻松地相对于各自的锚点放置锚点定位元素,并且适用于包含 9 个单元格且锚点元素位于中心的网格。

各种可能的边衬区定位选项,显示在 9 个单元格的网格上

如需使用边衬区(而非绝对定位),请使用具有物理值或逻辑值的 inset-area 属性。例如:

  • 顶部居中:inset-area: topinset-area: block-start
  • 左中:inset-area: leftinset-area: inline-start
  • 底部居中:inset-area: bottominset-area: block-end
  • 靠右:inset-area: rightinset-area: inline-end
。 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
显示多个锚点的演示。

演示的屏幕截图。

如需进一步探索这些位置,请查看以下工具:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
插入区域位置的锚点工具。

使用 anchor-size() 设置元素大小

anchor-size() 函数也是 Anchor Positioning API 的一部分,可用于根据锚点位置元素的大小(宽度、高度,或者内嵌和块大小)来设置或定位其位置。

以下 CSS 展示了一个将此用于高度的示例,即在 calc() 函数中使用 anchor-size(height) 将提示的最大高度设置为锚点高度的两倍。

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
anchor-size 的演示

演示的屏幕截图。

将锚点与弹出式窗口和对话框等顶层元素结合使用

锚点定位可与 popover 等顶层元素配合使用,效果极佳。和 <dialog>。虽然这些元素与 DOM 子树其余元素位于不同的层中,但通过锚定定位,您可以将这些元素与这些元素重新绑定,并与不在顶层中的元素一起滚动。这对于分层接口而言是一个巨大的优势。

在以下示例中,一组提示弹出式窗口是使用按钮触发打开的。按钮是锚点,提示是定位的元素。您可以为已定位的元素设置样式,就像设置任何其他锚定元素的样式一样。在此特定示例中,anchor-nameposition-anchor 是按钮和提示上的内嵌样式。由于每个锚点都需要具有唯一的锚点名称,因此在生成动态内容时,内联是实现此目的的最简单方法。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
通过 popover 使用锚点的演示

演示的屏幕截图。

使用 @position-try 调整锚点位置

获得初始锚点位置后,如果锚点到达其包含块的边缘,您可能需要调整位置。如需创建备用的锚点位置,您可以使用 @position-try 指令和 position-try-options 属性。

在以下示例中,子菜单显示在菜单右侧。菜单和子菜单非常适合将 Anchor Positioning API 与弹出窗口属性结合使用,因为这些菜单往往固定在触发器按钮上。

对于此子菜单,如果水平空间不足,可将其移至菜单下方。为此,请先设置初始位置:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
}

然后,使用 @position-try 设置后备锚定位置:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}

最后,使用 position-try-options 连接二者。总体而言,如下所示:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  inset-area: right span-bottom;
  */ connect with position-try options */
  position-try-options: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  inset-area: bottom;
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
通过 popover 使用锚点的演示

锚定位置自动翻转关键字

如果您进行了基本调整(例如从上到下或从左到右(或同时从上到下)翻转),甚至可以跳过创建自定义 @position-try 声明的步骤,并使用浏览器支持的内置翻转关键字(例如 flip-blockflip-inline)。这些是自定义 @position-try 声明的替代品,可以相互组合使用:

position-try-options: flip-block, flip-inline, flip-block flip-inline;

翻转关键字可以显著简化定位代码。只需几行代码,您就可以创建功能齐全的锚点(含备选位置):

#my-tooltip {
  position-anchor: --question-mark;
  inset-area: top;
  position-try-options: flip-block;
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
通过 position-try-options: flip-block 使用自动翻转功能

position-visibility,适用于子滚动条中的锚定广告

在某些情况下,您可能希望将某个元素锚定到网页的子滚动条中。在这些情况下,您可以使用 position-visibility 控制锚点的可见性。锚定广告何时始终位于用户视野范围内?什么时候会消失?借助此功能,您可以控制这些选项。如果您希望已定位的元素一直留在视图中,直到锚点不在视图范围外,则可以使用 position-visibility: anchors-visible

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
position-visibility: anchors-visible 演示

或者,您也可以使用 position-visibility: no-overflow 防止锚点溢出其容器。

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
position-visibility: no-overflow 演示

特征检测和 polyfill

由于目前对浏览器的支持有限,您在使用此 API 时可能需要采取一些预防措施。首先,您可以使用 @supports 功能查询直接在 CSS 中查看支持情况。为此,可以通过以下方式封装您的锚点样式:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

此外,您还可以使用 Oddbird 的 CSS 锚点定位 polyfill 对锚点定位功能执行 polyfill 操作,该工具可在 Firefox 54、Chrome 51、Edge 79 和 Safari 10 上运行。此 polyfill 支持大部分基本锚点位置功能,但当前的实现不完整,并且包含一些过时的语法。您可以使用 unpkg 链接或直接在软件包管理器中导入它。

无障碍功能注意事项

虽然 Anchor Positioning API 允许定位元素相对于其他元素的位置,但它本身并不会在元素之间创建任何有意义的语义关系。如果定位元素和定位的元素之间实际上存在语义关系(例如,定位的元素是关于定位文字的边栏注释),一种方法是使用 aria-details 从定位元素指向定位的元素。屏幕阅读器软件仍在学习如何处理 aria 详情,但支持功能在不断完善。

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>
.anchor {
  anchor-name: --anchor;
}

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

如果您将锚点定位与 popover 属性或 <dialog> 元素搭配使用,浏览器将处理焦点导航更正以提供适当的无障碍功能,因此您无需按 DOM 顺序排列弹出式窗口或对话框。如需了解详情,请参阅规范中有关无障碍功能的备注。

总结

这是一项全新的功能,我们非常期待看到您使用它来构建的内容。到目前为止,我们已经看到来自社区的一些非常棒的应用场景,例如图表中的动态标签、连接线、脚注和视觉交叉引用。在您试用锚点定位时,我们非常期待收到您的反馈,如果您发现任何错误,请告诉我们

深入阅读