CSS锚点定位指南

CSS锚点定位最基础的功能，是引入了一种全新的页面元素相对定位方式。为便于理解，我们将使用特定名称明确各元素间的关联关系：

• 锚点： 作为定位其他元素的参照点，故称之为 锚点。
• 目标元素： 相对于一个或多个锚点定位的绝对定位元素。后续我们将统一使用 目标元素 这一名称，但规范中常简称为“绝对定位元素”。

在后续代码示例和演示中，可将它们视为并排放置的两个<div>元素。

<div class="anchor">anchor</div>
<div class="target">target</div>

CSS锚点定位的核心在于绝对定位元素(即position: absolute)，因此在深入探讨前需回顾若干基础概念。

• 包含块： 这是包含元素的框。对于绝对定位元素，其包含块为最近祖先元素中具有非static定位方式或具有contain或filter等特定属性值的视口。
• 内边距修饰容器块(IMCB)： 对于绝对定位元素，内边距属性(top、right、bottom、left等)会缩小其定位和尺寸计算的容器块范围，从而形成新的容器块——即内边距修饰容器块(简称IMCB)。此概念至关重要，因为本指南涉及的属性(如position-area和position-try-order)均依赖于此原理。

首先解析确定锚点定位的两个属性：anchor-name用于定义锚点元素，position-anchor则将目标元素绑定至锚点元素。

anchor-name

普通元素默认并非锚点——我们需要显式将其设为锚点。最常见的方式是赋予名称，可通过anchor-name属性实现。

anchor-name: none | <dashed-ident>#

名称必须是 <dashed-ident>，即以两个连字符(--)开头的自定义名称，例如 --my-anchor 或 --MyAnchor。

.anchor {
  anchor-name: --my-anchor;
}

这便构成了锚点元素。它需要关联一个目标元素，即通过position-anchor属性设置的“目标”元素。

position-anchor

目标元素是具有绝对定位的元素，其定位与锚点元素通过anchor-name属性声明的名称关联。此属性将目标元素绑定至锚点元素。

position-anchor: auto | <anchor-element>

该属性需接收有效的<anchor-element>。因此若将其他元素设为“锚点”，可通过position-anchor属性设置目标元素：

.target {
  position: absolute;
  position-anchor: --my-anchor;
}

通常若未找到有效锚点元素，其他锚点属性与函数将被忽略。

既然已掌握建立锚点-目标关系的机制，接下来可针对目标元素相对于锚点元素的 定位 进行设置。以下两项属性用于控制目标元素在锚点元素两侧的定位位置(position-area)以及当空间不足时隐藏目标元素的条件(position-visibility)。

position-area

下一步是将目标相对于其锚点定位。最简单的方法是使用position-area属性，该属性会在锚点元素周围创建一个虚拟的3×3网格，让我们能够将目标放置在网格的一个或多个区域中。

position-area: auto | <position-area>

其工作原理是通过设置网格的行和列来实现，使用 逻辑值 如start和end(取决于书写模式)；物理值 如top、left、right、bottom以及共享值center，随后将目标元素的内部可视边界(IMCB)缩小至所选网格区域。

.target {
  position-area: top right;
  /* or */
  position-area: start end;
}

逻辑值参照包含块的书写模式，但若需相对于目标本身的书写模式定位，需在值前添加self前缀。

.target {
  position-area: self-start self-end;
}

所有轴均可使用center值。

.target {
  position-area: center right;
  /* or */
  position-area: start center;
}

若需将目标跨两个相邻网格区域放置，可在任意值(非center)前添加span-前缀，每次仅限横向或纵向扩展。

.target {
  position-area: span-top left;
  /* or */
  position-area: span-start start;
}

最后，使用span-all值可使目标跨三个相邻网格区域延伸。

.target {
  position-area: bottom span-all;
  /* or */
  position-area: end span-all;
}

您可能注意到position-area属性的物理值顺序并不严格：position-area: top left与position-area: left top效果相同，但逻辑值的顺序至关重要——position-area: start end与position-area: end start的含义完全相反。

我们可以通过在逻辑值前添加所需轴前缀(如y-、x-、inline-或block-)使其互换使用。

.target {
  position-area: inline-end block-start;
  /* or */
  position-area: y-start x-end;
}

position-visibility

该属性提供特定条件以隐藏目标元素于视口之外。

position-visibility: always | anchors-visible | no-overflow

• always: 目标元素始终显示，不受其锚点或溢出状态影响。
• no-overflow: 若应用定位回退后目标元素仍溢出其包含块，则强制隐藏。
• anchors-visible: 当 锚点(而非目标元素)完全溢出其包含块或被其他元素完全覆盖时，目标元素将被强制隐藏。

position-visibility: always | anchors-visible | no-overflow

当目标元素定位于锚点后，可为其添加额外指令，规定空间不足时的处理方式。我们已通过position-visibility属性实现过隐藏效果。但以下两个属性能更精细地控制目标元素的 重新定位：通过尝试锚点的其他边界(position-try-fallbacks)以及重新定位的尝试顺序(position-try-order)。

这两个属性可通过position-try简写属性同时声明——在了解两个组成属性后我们将对此进行说明。

position-try-fallbacks

该属性接受以逗号分隔的 位置备用方案 列表，当目标元素在包含块中溢出空间时将依次尝试这些方案。属性会逐个使用备用值重新定位，直至找到合适方案或耗尽所有选项。

position-try-fallbacks: none | [ [<dashed-ident> || <try-tactic>] | <'inset-area'>  ]#

• none: 保持目标位置选项列表为空。
• <dashed-ident>: 在选项列表中添加名为给定值的自定义@position-try备用方案。若不存在匹配的@position-try，则忽略该值。
• <尝试策略>: 通过在三个轴向之一翻转目标当前位置创建选项列表，每个轴向由独立关键词定义。可组合使用以叠加效果。
  • flip-block 关键词交换块轴方向的值。
  • flip-inline 关键词交换行内轴方向的值。
  • flip-start 关键词对对角线方向的值进行交换。
• <dashed-ident> || <try-tactic>: 结合自定义 @try-option 与 <try-tactic> 创建单位置回退方案。<try-tactic> 关键词也可组合以叠加效果。
• <“位置区域”> 使用 位置区域 语法将锚点移动至新位置。

.target {
  position-try-fallbacks:
    --my-custom-position,
    --my-custom-position flip-inline,
    bottom left;
}

position-try-order

该属性根据哪个位置能为目标提供最大空间，从position-try-fallbacks属性中定义的备用值中选择新位置。其余选项按可用空间从大到小重新排序。

position-try-order: normal | most-width | most-height | most-block-size | most-inline-size

“更多空间”具体指什么？针对每个位置备选方案，它会计算目标元素的IMCB尺寸。然后根据选定的选项，选择能使IMCB获得最大宽度或高度的值：

• most-width
• most-height
• most-block-size
• most-inline-size

.target {
  position-try-fallbacks: --custom-position, flip-start;
  position-try-order: most-width;
}

position-try

此为简写属性，将position-try-fallbacks与position-try-order属性合并为单一声明。它先接受排序顺序，再接受可能的位置备选方案列表。

position-try: < "position-try-order" >? < "position-try-fallbacks" >;

因此，我们可以将两个属性合并为单一样式规则：

.target {
  position-try: most-width --my-custom-position, flip-inline, bottom left;
}

在上节中我们学习了anchor()函数。该函数的一个特殊之处在于，它只能声明在基于内边距的属性上，我们所见的所有示例都体现了这一点。这看似限制了函数的应用场景，实则赋予了anchor()超越锚定位属性的超能力：它支持同时声明多个内边距基准属性。 因此我们能够为同一目标元素设置多个锚点函数!

以下是上一节中 anchor() 函数的早期示例之一：

.target {
  top: anchor(--my-anchor bottom);
  left: anchor(--my-anchor end, 50%);
}

我们同时在 top 和 left 内边距属性上声明了同一个名为 --my-anchor 的锚点元素。但这并非必要做法——我们完全可以将目标元素关联到多个锚点元素。

.anchor-1 { anchor-name: --anchor-1; }
.anchor-2 { anchor-name: --anchor-2; }
.anchor-3 { anchor-name: --anchor-3; }
.anchor-4 { anchor-name: --anchor-4; }

.target {
  position: absolute;
  inset-block-start: anchor(--anchor-1);
  inset-inline-end: anchor(--anchor-2);
  inset-block-end: anchor(--anchor-3);
  inset-inline-start: anchor(--anchor-4);
}

或者更简洁地实现：

.anchor-1 { anchor-name: --anchor-1; }
.anchor-2 { anchor-name: --anchor-2; }
.anchor-3 { anchor-name: --anchor-3; }
.anchor-4 { anchor-name: --anchor-4; }

.target {
  position: absolute;
  inset: anchor(--anchor-1) anchor(--anchor-2) anchor(--anchor-3) anchor(--anchor-4);
}

以下演示展示了将目标元素绑定至两个注册锚点的<textarea>元素。<textarea>支持点击拖拽调整尺寸，这两个元素被绝对定位在页面对角线两端。若将目标元素同时绑定至两个锚点，当调整锚点尺寸时，目标元素会随之在页面上拉扯变形，形成类似两锚点拔河的动态效果。

截至本文撰写时，该演示仅在Chrome浏览器中支持，因此我们附上视频以便您直观了解其运作原理。

锚点定位最直接的应用场景是创建工具提示、信息框和弹出框，但也可用于装饰性元素。这意味着锚点定位无需在锚点元素与目标元素间建立语义关联。您可能立刻察觉到问题所在：非视觉设备(如屏幕阅读器)无法理解两个看似无关的元素如何关联。

举例来说，假设我们有一个名为.tooltip的元素，将其设置为锚定到另一个名为.anchor元素的目标元素。

<div class="anchor">anchor</div>
<div class="toolip">toolip</div>

.anchor {
  anchor-name: --my-anchor;
}

.toolip {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top;
}

我们需要在DOM中建立这两个元素的关联，使其共享辅助技术可解析的上下文。使用ARIA属性描述元素的通用准则通常是：不要这样做。 至少在没有其他语义化实现方式时应避免使用。

这正是需要使用ARIA属性的典型场景。在采取任何其他措施之前，屏幕阅读器目前只能识别两个并列元素，而无法感知它们之间的标记关系。这对无障碍访问而言是个遗憾，但我们可通过对应的ARIA属性轻松解决：

<div class="anchor" aria-describedby="tooltipInfo">anchor</div>
<div class="toolip" role="tooltip" id="tooltipInfo">toolip</div>

现在它们在视觉和语义上都紧密关联了！若您对ARIA属性尚不熟悉，建议阅读Adam Silver的《为何、如何及何时使用语义HTML与ARIA》，这是一篇极佳的入门指南。

CSS锚点定位自编辑草案发布以来经历了多次变更。Chrome浏览器团队在该特性尚在定义阶段便迅速加入并实现了锚点定位功能，这导致混淆——基于Chromium的浏览器在规范持续修订期间已部分实现了锚点定位功能。

我们将列举浏览器因规范变更而需更新实现的具体案例。虽然略显复杂，但截至Chrome 129+版本，已发布但后续变更的内容如下：

position-area

inset-area属性已更名为position-area(#10209)，但Chrome 131版本前仍将支持旧名称。

.target {
  /* from */
  inset-area: top right;

  /* to */
  position-area: top right;
}

位置尝试备用方案

位置尝试选项已重命名为位置尝试备用方案(#10395)。

.target {
  /* from */
  position-try-options: flip-block, --smaller-target;

  /* to */
  position-try-fallbacks: flip-block, --smaller-target;
}

inset-area()

inset-area() 包装函数在 position-try-fallbacks 中已不存在 (#10320)，现在可直接编写值而无需包装：

.target {
  /* from */
  position-try-options: inset-area(top left);

  /* to */
  position-try-fallbacks: top left;
}

anchor(center)

最初若需将目标居中定位，需使用繁琐的语法：

.target {
  --center: anchor(--x 50%);
  --half-distance: min(abs(0% - var(--center)), abs(100% - var(--center)));

  left: calc(var(--center) - var(--half-distance));
  right: calc(var(--center) - var(--half-distance));
}

CWSSG工作组已解决(#8979)，新增anchor(center)参数，免去繁琐的语法转换：

.target {
  left: anchor(center);
}

是的，CSS锚点定位确实存在一些问题，至少在本指南撰写时如此。例如规范规定：若元素未设置默认锚点元素，position-area将失效。此为已知问题(#10500)，但仍可复现。

因此以下代码…

.container {
  position: relative;
}

.element {
  position: absolute;
  position-area: center;
  margin: auto;
}

...至少在Chrome中会将.element居中显示于容器内：

感谢Afif13提供的精彩演示！

另一个例子涉及position-visibility属性。当锚点元素超出视区或屏幕范围时，通常希望目标元素也随之隐藏。规范规定该属性的默认值应为anchors-visible，但浏览器实际默认采用always。

当前Chrome的实现并未遵循规范，确实将always作为初始值。但规范设计初衷明确：当锚点元素超出屏幕或被滚动隐藏时，通常需要实现隐藏效果。 (#10425)

• “CSS锚点定位” (CSS工作组)
• “使用CSS锚点定位” (MDN)
• “CSS锚点定位API入门” (Una Kravets)