CSS 锚点定位模块级别 1

1. 引言

CSS 绝对定位 允许作者将框放置在页面上的任何位置，而不考虑除其包含块之外的其他框的布局。这种灵活性非常有用，但也非常受限——通常您希望相对于*某个*其他框进行定位。锚点定位（通过 position-anchor 和 position-area 属性和/或锚点函数 anchor() 与 anchor-size()）允许作者实现这一点，将绝对定位的框“锚定”到页面上的一个或多个其他框（其锚点引用），同时也允许它们尝试多种可能的位置，以找到避免重叠/溢出的“最佳”位置。

.anchor {
  anchor-name: --tooltip;
}
.tooltip {
  /* Fixpos means we don't need to worry about
     containing block relationships;
     the tooltip can live anywhere in the DOM. */
  position: fixed;

  /* All the anchoring behavior will default to
     referring to the --tooltip anchor. */
  position-anchor: --tooltip;

  /* Align the tooltip's bottom to the top of the anchor;
     this also defaults to horizontally center-aligning
     the tooltip and the anchor (in horizontal writing modes). */
  position-area: block-start;

  /* Automatically swap if this overflows the window
     so the tooltip's top aligns to the anchor's bottom
     instead. */
  position-try: flip-block;

  /* Prevent getting too wide */
  max-inline-size: 20em;
}

.tooltip {
  /* Using the popover + popovertarget attributes sets 'position: fixed'
     and creates the necessary position-anchor relationship already. */
  position-area: block-start;
  position-try: flip-block;
  max-inline-size: 20em;
}

1.1. 值定义

本规范遵循 [CSS2] 中的 CSS 属性定义约定，并使用 [CSS-VALUES-3] 中的 值定义语法。本规范中未定义的值类型在 CSS 值与单位 [CSS-VALUES-3] 中定义。与其他 CSS 模块组合可能会扩展这些值类型的定义。

除了定义中列出的属性特定值外，本规范中定义的所有属性也都接受 CSS 全局关键字 作为其属性值。为了可读性，未明确重复列出。

像 CSS 中除选择器匹配之外的大多数操作一样，本规范中的功能作用于扁平元素树。

2. 确定锚点

本规范的几个功能引用了锚点框的位置和大小。除非另有说明，否则这指的是相关锚点元素的边框框边缘。在大多数情况下，相关的锚点元素被指定为默认锚点元素，使用 position-anchor 属性，该属性可以引用宿主语言定义的隐式锚点元素，或通过 CSS anchor-name 和 anchor-scope 属性命名的锚点。（anchor() 函数也可以直接引用已命名的锚点。）

锚点框的位置和大小是在布局完成后确定的。此位置和大小包括缩放和基于定位的调整（例如 position: relative 或 position: sticky）以及变换（例如 transform 或 offset-path）。在这些情况下，改用绝对定位元素包含块坐标空间中的锚点框轴对齐包围矩形。变换通常在不同的线程上进行优化，因此基于变换的锚点框位置更新可能会延迟几帧。作者可以通过在可行的情况下使用绝对或相对定位来避免这种延迟。

如果锚点框被分片，且引用该锚点框的绝对定位框的包含块位于相关的分片上下文之外，则改用其框分片的轴对齐包围矩形。（如果绝对定位框位于分片上下文内部，它将锚点框视为未分片——并且其自身可以被分片上下文分片。）

出于性能原因，滚动处理比较特殊，请参见 § 3.3 考虑滚动。其他布局后效果（如滤镜）不会影响锚点框的位置。

2.1. 创建锚点：anchor-name 属性

<anchor-name> = <dashed-ident>

anchor-name 属性声明一个元素为锚点元素，其主框为锚点框，并为其提供一个可供定位的锚点名称列表。值定义如下：

none（无）

该属性无效。

<anchor-name>#

如果元素生成主框，则该元素为锚点元素，具有指定的锚点名称列表。每个锚点名称都是一个松散匹配的树作用域名称。

否则，该属性无效。

锚点名称不需要是唯一的。并非所有元素都能成为给定框的目标锚点元素。因此，如果使用范围得当，可以在多个地方重复使用一个名称。

注意：如果多个元素共享一个锚点名称并且对于给定的定位框都是可见的，则目标锚点元素将是最近的祖先（如果存在），否则将是 DOM 顺序中的最后一个。anchor-scope 属性可用于进一步限制哪些名称对于给定的引用框是可见的。

锚点名称默认情况下不受包含（containment）约束；即使元素具有样式或布局包含（或任何类似的包含形式），其后代的锚点名称对于页面其他地方的元素也是可见的。

注意：当元素处于另一个元素的跳过内容中时（例如由于 content-visibility: hidden），它不是一个可接受的锚点元素，实际上表现得好像它没有名称一样。

注意：影子树中的定位元素可以引用在“更高层”树中定义的锚点名称。不过，目前它们不能引用在“更低层”影子树中定义的锚点名称。

2.2. 锚点名称作用域：anchor-scope 属性

此属性将指定的锚点名称及针对这些锚点名称的查找范围，限制在此元素的子树内。参见 § 2 确定锚点。

值的含义如下：

none（无）

锚点名称作用域无变化。

all

指定由该元素或其后代定义的所有锚点名称——其作用域尚未被使用 anchor-scope 的后代限制——仅在此元素的后代作用域内；并限制后代仅将锚点名称匹配到此子树内的锚点元素。

此值仅影响同一树作用域内的锚点名称，就像它是严格匹配的树作用域名称一样。（即 anchor-scope: all 的作用与 anchor-scope: --foo, --bar, ... 相同，列出所有相关的锚点名称。）

<anchor-name>

指定由该元素或其后代定义且匹配的锚点名称——其作用域尚未被使用 anchor-scope 的后代限制——仅在此元素的后代作用域内；并限制后代仅将这些锚点名称匹配到此子树内的锚点元素。

<anchor-name> 表示一个严格匹配的树作用域名称，即它只能匹配同一影子树内的锚点名称。[CSS-SCOPING-1]

此属性对隐式锚点元素无效。

注意：由于首先检查定位元素的祖先，如果所需的锚点是祖先，通常不需要使用 anchor-scope。仅在所需锚点不是祖先，或者您明确希望“隐藏”一个锚点以防被页面其他地方引用时，才需要使用它。

li {
  anchor-name: --list-item;
  anchor-scope: --list-item;
}
li .positioned {
  position: absolute;
  position-anchor: --list-item;
  position-area: inline-start;
}

修正上述示例，因为该用例现在已自动化。

2.3. 查找锚点

本规范中的多处内容会查找目标锚点元素，通过给定的锚点指定符，它要么是一个 <dashed-ident>（以及一个树作用域引用），该引用应与页面其他地方的 anchor-name 值匹配；或者是关键字 auto；或者为空（缺少指定符）。

注意：这些条件所捕获的一般规则是，一个元素只有在它自己的框在需要引用它的定位框进行布局之前完全布局完成，才能成为定位框的目标锚点元素。CSS 的布局规则根据锚点和定位框与彼此及其包含块的关系，对此提供了一些有用的保证。下方的条件列表将层叠上下文规则精确地改写为仅与此目的相关的内容，确保锚点定位中不存在循环的可能性。

2.4. 默认锚点：position-anchor 属性

position-anchor 属性指定默认锚点元素，供 position-area、position-try 以及（默认情况下）应用于此元素的所有锚点函数使用。position-anchor 是 position 的仅重置子属性。

normal

如果 position-area 为 none，表现为 none。否则，表现为 auto。

none（无）

该框没有默认锚点元素。

auto

使用隐式锚点元素（如果存在）；否则该框没有默认锚点元素。

<anchor-name>

由指定的 <anchor-name> 选择的目标锚点元素是该框的默认锚点元素。

match-parent

使用与父元素（如果是伪元素，则为原始元素）相同的默认锚点元素（如果存在且为可接受锚点元素）。否则，该框没有默认锚点元素。

默认锚点元素的主框是该框的默认锚点框。

.anchored {
  position: absolute;
  top: calc(.5em + anchor(outside));
  /* Since no anchor name was specified,
     this automatically refers to the
     default anchor box. */
}

.foo.anchored {
  position-anchor: --foo;
}
.bar.anchored {
  position-anchor: --bar;
}

2.4.1. 隐式锚点元素

某些规范可以定义，在特定情况下，特定元素是另一个元素的隐式锚点元素。

TODO：填入一个新的 Popover 相关细节示例（一旦该内容最终被 HTML 规范采纳）。

隐式锚点元素可以通过 position-anchor 中的 auto 关键字引用，也可以通过在锚点函数中省略锚点引用来引用。

伪元素的隐式锚点元素是其原始元素，除非另有说明。

2.5. 锚点相关性

在确定元素 el 是否与用户相关时，如果 el 的后代是一个定位框的目标锚点元素（该框本身未被跳过，且其包含块不是 el 或 el 的后代），则 el 必须被视为与用户相关。

注意：这意味着，例如，content-visibility: auto 子树中的锚点将阻止其子树跳过其内容，只要依赖它的定位框也未被跳过。（除非锚点和定位框都位于同一个 content-visibility: auto 元素下；它们不能循环地保持对方可见。）

3. 基于锚点的定位

绝对定位框可以相对于页面上的一个或多个锚点框定位自身。

position-area 属性提供了一个方便的基于网格的概念，用于相对于默认锚点框进行定位；对于更复杂的定位或相对于多个框的定位，可以在插值属性中使用 anchor() 函数来显式引用锚点框的边缘。

3.1. position-area 属性

锚点定位最常见的用例仅涉及定位框的包含块边缘和默认锚点框的边缘。这些线条可以被视为定义了一个 3×3 的网格；position-area 让您可以轻松指定在此定位区域网格的哪个区域中布局定位框。

none（无）

该属性无效。

<position-area>

如果框没有默认锚点框，或者不是绝对定位框，则该值无效。

否则，选择定位区域网格的一个区域，并将其作为框的包含块。

注意：这意味着插值属性指定相对于定位区域的偏移量，且某些属性值（如 max-height: 100%）也将相对于定位区域。

除 none 外的值具有以下额外效果：

• 当绝对定位包含块由滚动容器生成时，使用可滚动包含块代替本地包含块，以便（通常）整个可滚动溢出区域均可用于定位。

• 任何 auto 插值属性和 auto 外边距属性的使用值解析为 0。

• 自对齐属性的 normal 值解析为相应的值，参见 § 4.1 特定区域的默认对齐方式。

3.1.1. 解析定位区域网格

定位区域网格是一个 3×3 的网格，在每个轴上有四条网格线。按顺序（使用包含块的书写模式）：

• 框的修改前包含块的起始边缘，或者如果默认锚点框更靠起始方向，则为其起始边缘

• 默认锚点框的起始边缘

• 默认锚点框的结束边缘

• 框的修改前包含块的结束边缘，或者如果默认锚点框更靠结束方向，则为其结束边缘。

注意：当默认锚点框部分或完全位于修改前包含块之外时，定位区域网格的一些行或列的大小可能为零。

3.1.2. <position-area> 值的语法

位置被指定为一对值，可以用流相对或物理术语表示。<position-area> 值的允许语法为：

<position-area> = [
  [ left | center | right | span-left | span-right
  | x-start | x-end | span-x-start | span-x-end
  | self-x-start | self-x-end | span-self-x-start | span-self-x-end
  | span-all ]
  ||
  [ top | center | bottom | span-top | span-bottom
  | y-start | y-end | span-y-start | span-y-end
  | self-y-start | self-y-end | span-self-y-start | span-self-y-end
  | span-all ]
|
  [ block-start | center | block-end | span-block-start | span-block-end | span-all ]
  ||
  [ inline-start | center | inline-end | span-inline-start | span-inline-end
  | span-all ]
|
  [ self-block-start | center | self-block-end | span-self-block-start
  | span-self-block-end | span-all ]
  ||
  [ self-inline-start | center | self-inline-end | span-self-inline-start
  | span-self-inline-end | span-all ]
|
  [ start | center | end | span-start | span-end | span-all ]{1,2}
|
  [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}
]

<position-area> 值通过指定区域占用的行和列来选择定位区域网格的区域，如下所示：

start, end, self-start, self-end

top, bottom, left, right

y-start, y-end, self-y-start, self-y-end

x-start, x-end, self-x-start, self-x-end

block-start, block-end, self-block-start, self-block-end

inline-start, inline-end, self-inline-start, self-inline-end

center

对应于此关键字正在指定轴的单一相关行或列。

与 anchor() 一样，纯逻辑关键字（start, end 等）是指框的书写模式的包含块。x-start 等也以同样的方式确定方向，但在指定的物理轴上。

self-* 逻辑关键字（self-start, self-x-end 等）是相同的，但指的是框自身的书写模式。

span-start, span-end, span-self-start, span-self-end

span-top, span-bottom, span-left, span-right

span-y-start, span-y-end, span-self-y-start, span-self-y-end

span-x-start, span-x-end, span-self-x-start, span-self-x-end

span-block-start, span-block-end, span-self-block-start, span-self-block-end

span-inline-start, span-inline-end, span-self-inline-start, span-self-inline-end

两个相邻的行或列，取决于此关键字正在指定哪个轴：中心行/列，以及与单轨关键字所述的关键字另一半相对应的行/列。

（例如，span-top 跨越前两行——中心行和顶行。）

span-all

所有三行或三列，取决于此关键字正在指定哪个轴。

一些关键字关于它们指的是哪个轴是模糊的：center、span-all，以及未明确指定块或内联轴的 start 等关键字。如果另一个关键字关于其轴不模糊，则模糊关键字指向相反的轴。（例如，在 block-start center 中，center 关键字指的是内联轴。）然而，如果两个关键字都是模糊的，则第一个指代框的块轴包含块，第二个指代内联轴。（例如，span-all start 等同于 span-all inline-start。）

如果只给出一个关键字，若该关键字关于其轴不模糊，则其表现得如同第二个关键字是 span-all；否则，它表现得如同该关键字被重复。（例如，top 等同于 top span-all，但 center 等同于 center center。）

3.1.3. <position-area> 的计算值与序列化

<position-area> 值的计算值是两个关键字，分别指示每个轴中选定的轨道，并将长逻辑关键字（block-start）和短逻辑关键字（start）视为等效。它按照语法（如上）给出的顺序序列化，逻辑关键字以其简写形式序列化（例如 start start 而不是 block-start inline-start）。

3.2. 锚点相关插值：anchor() 函数

绝对定位框可以在其插值属性中使用 anchor() 函数作为值，以引用一个或多个锚点框的位置。anchor() 函数解析为 <length>。它仅允许在插值属性中使用（否则无效）。

<anchor()> = anchor( <anchor-name>? && <anchor-side>, <length-percentage>? )
<anchor-side> = inside | outside
       | top | left | right | bottom
       | start | end | self-start | self-end
       | <percentage> | center

anchor() 函数有三个参数：

• <anchor-name> 值指定如何查找它将从中获取定位信息的锚点元素。其可能的值包括：

  <dashed-ident>

  指定它将查找的锚点名称。此名称为树作用域引用。

  省略

  如果可能，选择为该框定义的默认锚点元素。

  详情参见目标锚点元素。

• <anchor-side> 值引用目标锚点元素的相应侧面的位置。其可能的值包括：

  inside (内侧)

  outside (外侧)

  根据它所使用的插值属性，解析为锚点框的其中一个侧面。inside 指的是与插值属性相同的侧面（将定位框附着在锚点框的“内部”），而 outside 指的是相反的侧面。

  top

  right

  bottom

  left

  引用锚点框的指定侧面。

  注意：这些仅可在匹配轴的插值属性中使用。例如，left 可用于 left、right 或指代水平轴的逻辑插值属性。

  start

  end

  self-start

  self-end

  通过根据定位框（对于 self-start 和 self-end）或定位框的包含块（对于 start 和 end）的书写模式解析关键字，引用与所用插值属性位于同一轴上的锚点框的侧面之一。

  <percentage>（百分比）

  center

  引用start 和 end 侧面之间的相应百分比位置，其中 0% 等同于 start，100% 等同于 end。

  center 等同于 50%。

• 可选的 <length-percentage> 最终参数是一个回退值，指定如果函数是不可解析的锚点函数时，该函数应计算为什么值。

一个表示可解析锚点函数的 anchor() 函数，在计算值时间（使用样式与布局交错）会解析为一个 <length>，该长度会将定位框的内边距修改后的包含块（与函数所在属性对应的边界）与目标锚点元素的锚点盒的指定边界对齐。

注意：这意味着使用 锚点函数 的属性的过渡或动画对于各种可能的变化都将“如预期般”工作：锚点盒移动、锚点元素被添加或从文档中移除、锚点上的 anchor-name 属性被更改等。

#bar-1 { anchor-name: --anchor-1; }
#bar-2 { anchor-name: --anchor-2; }
#bar-3 { anchor-name: --anchor-3; }
.line {
  position: absolute;
  left: anchor(--chart left);
  right: anchor(--chart right);
  &.max {
    bottom: max(
      anchor(--anchor-1 top),
      anchor(--anchor-2 top),
      anchor(--anchor-3 top)
    );
  }
  &.min {
    bottom: min(
      anchor(--anchor-1 top),
      anchor(--anchor-2 top),
      anchor(--anchor-3 top)
    );
  }
}

3.2.1. anchor() 的解析

anchor() 函数仅在满足以下所有条件时，才是一个 可解析锚点函数：

• 它应用于一个绝对定位的盒。

• 如果其 <anchor-side> 指定了一个物理关键词，则必须在适用于该轴的内边距属性中指定。（例如，left 只能用于 left、right 或水平轴上的逻辑内边距属性。）

• 对于应用它的盒，存在一个目标锚点元素，并且函数中指定了 <anchor-name> 值。

如果这些条件中有任何一个为假，则 anchor() 函数计算为其指定的 fallback 值。如果没有指定 fallback 值，则引用它的声明在计算值时间无效。

3.3. 考虑滚动

出于性能原因，实现通常在单独的滚动/"合成"线程上执行滚动，该线程具有非常有限的能力（简单的移动/转换等，但没有布局或类似的昂贵操作），因此可以信赖其对滚动的响应速度足够快，以至于在人类感知中被视为“瞬间”。

如果滚动仅仅导致锚点定位元素移动，理论上没有问题；移动可以在滚动线程上执行，因此定位元素会随滚动内容平滑移动。然而，锚点定位允许元素使其自身相对边缘的位置依赖于不同滚动上下文中的内容，这意味着滚动可能仅移动一个边缘并导致尺寸变化，从而执行布局。这无法在滚动线程上执行！

为了补偿这一点，同时尽可能多地允许锚定到各种元素，锚点定位使用了记住的滚动偏移量和滚动补偿的组合。

以上允许定位元素一次性响应其锚点引用的滚动位置，但如果其中任何一个被滚动，定位元素将不再看起来被锚定到它们（尽管它将继续响应它们的非滚动移动）。虽然这个问题通常无法解决，但我们可以响应一个锚点引用的滚动；具体来说，即默认锚点元素。

4. 基于锚点的对齐

4.1. 区域特定的默认对齐

当 position-area 不为 none 时，normal 自对齐的已使用值会根据 <position-area> 值发生变化，以使盒向锚点对齐。

• 如果仅选中了一个轴上的中心轨道，则该轴上的默认对齐方式为 center。

• 如果选中了所有三条轨道，则该轴上的默认对齐方式为 anchor-center。

• 否则，该轴上的默认对齐方式是朝向未指定的侧轨道：如果指定了其轴的“start”轨道，则该轴上的默认对齐方式为 end，依此类推。

然而，如果相关轴上只有一个内边距属性为 auto，则默认对齐方式反而朝向具有非 auto 内边距的边界；并且这是一种 unsafe 对齐。

注意：这种单 auto 行为保留了单个指定内边距控制绝对定位盒位置的方式。

4.2. 在锚点上居中：anchor-center 对齐值

自对齐属性允许绝对定位盒在内边距修改后的包含块内进行对齐。现有的值，加上精心选择的内边距属性，通常足以实现有用的对齐，但锚点定位的一个常见情况——在锚点盒上方居中——需要小心且有些复杂的设置才能实现。

新的 anchor-center 值使这种情况变得极其简单：如果定位盒具有默认锚点盒，那么它会在相关轴上（尽可能地）在默认锚点盒上方居中。此外，

• 可滚动包含块在适用的地方代替了局部包含块，以便整个可滚动溢出区域（通常）可用于定位。

• 任何 auto 内边距属性和 auto 外边距属性的已使用值解析为 0。

如果盒不是绝对定位的，或者没有默认锚点盒，则此值表现为 center，并且对内边距属性的解析方式没有额外影响。

注意：使用 anchor-center 时，默认情况下，如果锚点太靠近盒的原始包含块边界，它将“位移”以偏离纯粹的居中状态，从而保持在原始包含块内。详见 CSS Box Alignment 3 § 4.4 溢出对齐：安全与不安全关键词及滚动安全限制。

5. 基于锚点的尺寸调整

绝对定位盒可以在其尺寸调整属性中使用 anchor-size() 函数来引用一个或多个锚点盒的尺寸。anchor-size() 函数解析为一个 <length>。它仅允许在接受的 @position-try 属性中使用（否则无效）。

5.1. anchor-size() 函数

anchor-size() = anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-size> = width | height | block | inline | self-block | self-inline

anchor-size() 函数与 anchor() 类似，并接受相同的参数，只是 <anchor-side> 关键词被 <anchor-size> 所取代，指向两个相对侧之间的距离。

物理 <anchor-size> 关键词（width 和 height）分别指目标锚点元素的宽度和高度。与 anchor() 不同，没有必须匹配轴的限制；例如，width: anchor-size(--foo height); 是有效的。

逻辑 <anchor-size> 关键词（block, inline, self-block, 和 self-inline）根据盒的书写模式（对于 self-block 和 self-inline）或盒的包含块的书写模式（对于 block 和 inline）映射到物理关键词之一。

如果省略了 <anchor-size> 关键词，它默认为匹配 anchor-size() 所使用的属性轴的关键词。（例如，width: anchor-size() 等同于 width: anchor-size(width)。）

一个表示可解析锚点尺寸函数的 anchor-size() 函数，在计算值时间（通过样式与布局交错）解析为分隔目标锚点元素的锚点盒的相关边缘（左和右，或上和下，取决于指定轴）的 <length>。

5.1.1. anchor-size() 的解析

anchor-size() 函数仅在满足以下所有条件时，才是一个 可解析锚点尺寸函数：

• 它应用于一个绝对定位盒。

• 对于应用它的盒，存在一个目标锚点元素，并且函数中指定了 <anchor-name> 值。

如果这些条件中有任何一个为假，则 anchor-size() 函数解析为其指定的 fallback 值。如果没有指定 fallback 值，则引用它的声明在计算值时间无效。

6. 溢出管理

锚点定位虽然功能强大，但也可能不可预测。锚点盒可能位于页面的任何位置，因此以任何特定方式定位盒（例如在锚点上方，或锚点右侧）可能导致定位盒溢出其包含块或部分被定位到屏幕之外。

为了改善这一点，绝对定位盒可以使用 position-try-fallbacks 属性指定额外的位置选项（从盒的现有样式生成，或在 @position-try 规则中指定的定位/对齐属性的变体集），UA 可以尝试这些选项，如果盒溢出了其初始位置。每个选项按照 position-try-order 指定的顺序一个接一个地应用于盒，第一个不导致盒溢出其包含块的选项被视为获胜者。

一旦选择了一个选项，元素将保持这些样式直到再次溢出，即使之前（可能更理想的）选项再次变得可用而不导致溢出。（参见记录最后一次成功的位置选项。）

#myPopover {
  position: fixed;
  position-anchor: --button;
  position-area: bottom span-x-end;
  position-try-fallbacks: flip-x, flip-y, flip-x flip-y, bottom, top;

  /* The popover is at least as wide as the button */
  min-width: anchor-size(width);

  /* The popover is at least as tall as 2 menu items */
  min-height: 6em;
}

6.1. 提供 Fallback 选项：position-try-fallbacks 属性

此属性提供了一组可选的定位样式，用于在绝对定位盒溢出其内边距修改后的包含块时尝试。此位置选项列表最初包含从元素的基本 fallback 样式生成的单个位置选项，即未应用 position-try-fallbacks 的计算样式。

列表中每个逗号分隔的条目都是一个单独的选项：要么是 @position-try 块的名称，要么是一个代表盒现有计算样式自动转换的 <try-tactic>。

值的含义如下：

none（无）

该属性没有影响；盒的位置选项列表为空。

<dashed-ident>

如果存在具有给定名称的 @position-try 规则，则其关联的位置选项被添加到位置选项列表中。

否则，该值没有影响。

<try-tactic>

通过对盒的基本样式执行指定的尝试策略，自动创建一个位置选项，然后将构造的位置选项添加到盒的位置选项列表中。

<try-tactic> = flip-block || flip-inline || flip-start || flip-x || flip-y

flip-block

交换块轴中的值（例如在 margin-block-start 和 margin-block-end 之间），本质上是围绕行内轴线进行镜像。

flip-inline

交换行内轴中的值，本质上是围绕块轴线进行镜像。

flip-x

交换水平轴中的值（例如在 margin-left 和 margin-right 之间），本质上是围绕垂直轴线进行镜像。

flip-y

交换垂直轴中的值，本质上是围绕水平轴线进行镜像。

flip-start

交换start 属性的值彼此交换，以及end 属性的值彼此交换（例如在 margin-block-start 和 margin-inline-start 之间），本质上是围绕从块起始-行内起始角到块结束-行内结束角绘制的对角线进行镜像。

如果给出了多个关键词，则按顺序组合变换以产生单个位置选项。逻辑方向根据包含块的书写模式进行解析。

<dashed-ident> || <try-tactic>

结合前两个选项的影响：如果存在具有给定名称的 @position-try 规则，则将其位置选项应用于基本样式，然后根据指定的 <try-tactic> 对其进行变换，并将结果添加到盒的位置选项列表中。

否则，不执行任何操作。

<position-area>

自动创建一个仅由具有给定值的 position-area 属性组成的位置选项。

6.2. 确定 Fallback 顺序：position-try-order 属性

此属性允许元素根据它们定义的可用空间对位置选项进行排序，如果盒拥有尽可能多的空间比严格遵循 position-try-fallbacks 中声明的顺序更重要。

<try-size> = most-width | most-height | most-block-size | most-inline-size

normal

按照 position-try-fallbacks 指定的顺序尝试位置选项。

most-width

most-height

most-block-size

most-inline-size

对于位置选项列表中的每个条目，将该位置选项应用于盒，并找到这些样式产生的内边距修改后的包含块尺寸（将 auto inset 值视为零）。根据此尺寸稳定排序位置选项列表，最大的放在最前面。

逻辑方向根据包含块的书写模式进行解析。

.anchor { anchor-name: --foo; }
.list {
  position: fixed;
  position-anchor: --foo;
  position-area: block-end span-inline-end;
  position-try-fallbacks: --bottom-scrollable, flip-block, --top-scrollable;
  position-try-order: most-height;
}
@position-try --bottom-scrollable {
  align-self: stretch;
}
@position-try --top-scrollable {
  position-area: block-start span-inline-end;
  align-self: stretch;
}

6.3. position-try 缩写属性

此缩写属性同时设置 position-try-fallbacks 和 position-try-order。如果省略了 <'position-try-order'>，则设置为属性的初始值。

6.4. @position-try 规则

@position-try 规则定义了一个具有给定名称的位置选项，指定了一组或多组可通过 position-try-fallbacks 应用于盒的定位属性。

@position-try 规则的语法为

@position-try <dashed-ident> {
  <declaration-list>
}

序言中指定的 <dashed-ident> 是规则的名称。如果声明了多个同名 @position-try 规则，它们的层叠方式与 @keyframe 规则相同。

@position-try 规则仅接受以下属性：

• 插入属性

• 外边距属性

• 尺寸调整属性

• 自对齐属性

• position-anchor

• position-area

在 <declaration-list> 中对属性使用 !important 是无效的。这样做会导致使用它的属性失效，但不会使整个 @property-try 规则失效。

@position-try 中的所有属性都作为位置 Fallback 起点应用于盒，这是一个位于作者起点和动画起点之间的新层叠起点。

与动画起点类似，使用 revert 值就像该属性是作者起点的一部分一样，从而使其回退到用户起点。（然而，与动画起点一样，revert-layer 没有特殊行为，按规定执行。）

注意：接受的 @position-try 属性是仅影响盒自身尺寸和位置，而不更改其内容或样式的最小属性组。这极大地简化了位置 fallback 的实现，同时解决了响应可用空间移动锚点定位盒的基本需求。由于这些规则覆盖了作者起点中的正常声明，这也限制了 @position-try 声明与正常层叠及其他属性继承之间的不良交互。预期容器查询的未来扩展将允许根据元素使用的位置 fallback 来查询元素，从而实现该受限列表所不允许的那种条件样式。

注意：如果多个元素想要使用相同的 @position-try 规则，但相对于它们自己的锚点元素，请省略 anchor() 中的 <anchor-name>，并改在 position-anchor 中指定每个盒的锚点。

注意：最常见的 fallback 定位类型（通常将定位盒放在锚点的一侧，但在需要时翻转到相对的一侧）可以通过 position-try-fallbacks 中的关键词自动完成，完全无需使用 @position-try。

6.5. 应用位置 Fallback

当定位盒（在应用任何默认滚动位移之后）溢出其内边距修改后的包含块，并且在其位置选项列表中具有不止一个位置选项时，它会确定位置 fallback 样式以尝试找到避免溢出的选项。最终样式通过交错应用于元素，因此它们会影响计算值（并可能触发过渡等），即使它们依赖于布局和已使用值。

实现可以选择对位置选项列表的长度施加实现定义的限制，以限制可能需要的过量布局工作量。此限制必须至少为 5。

在完整的布局过程中，一旦盒确定了其 fallback 样式（或确定它不使用任何样式），布局后续盒的操作就不能更改此决定。

6.5.1. 维护和清除 Fallback 选择

盒的一些变化对确定位置 fallback 样式有非常直接的影响，因此会触发特殊行为。这些 fallback 敏感变化包括：

• 其计算出的 position 值已更改，其包含块关联已更改，或者它不再生成盒。

• 其 position-try 的任何长式属性的计算值已更改。

• 其任何接受的 @position-try 属性的计算值已更改。

• 其引用的任何 @position-try 规则已被添加、删除或修改。

为此目的，仅考虑对基本计算样式的变化，即忽略来自过渡或动画层叠起点的任何声明的计算样式。

6.5.1.1. 记录上次成功的定位选项

为了尽可能维持布局稳定性，确定定位回退样式时会优先考虑上次成功的定位选项，其确定方式如下

6.5.2. 应用定位选项

6.6. 条件隐藏：position-visibility 属性

在某些情况下，显示绝对定位的盒子可能没有意义。此属性允许此类盒子根据某些通常需要的布局条件，有条件地显示。

always

此属性无效。（盒子显示时无需顾及其锚点或溢出状态。）

anchors-valid

如果盒子的任何所需的锚点引用未能解析为目标锚点元素，则盒子的 visibility 属性计算为 force-hidden。

什么是所需的锚点引用？没有回退值的 anchor() 函数；默认锚点*有时*是吗？此处需要更多细节。

是任何锚点缺失，还是所有锚点缺失？我可以看到这两种情况的用例。我们想在这里做出决定，还是以某种方式让它可控？

anchors-visible

如果盒子拥有一个默认锚点盒子，但该锚点盒子是不可见的或被中间盒子剪裁，则盒子的 visibility 属性计算为 force-hidden。

no-overflow

如果盒子即使在应用了 position-try 之后，仍然超出了其嵌入修改后的包含块 (inset-modified containing block)，则盒子的 visibility 属性计算为 force-hidden。

7. 可访问性影响

CSS 锚点定位不会创建、删除或改变元素之间的任何可访问性绑定。作者必须使用适当的标记功能来控制此类绑定。

由于其在许多不同场景中可以以多种方式使用，CSS 锚点定位不会自动在定位盒子与其任何锚点之间建立任何语义关系。例如，设计中的视觉锚定关系可能存在于一个元素与其语义锚点之间，也可能将该元素与语义锚点的祖先、兄弟或后代连接起来，具体取决于期望的视觉效果。同样，设计可能会选择不使用视觉锚定关系，即使存在语义关系，反之亦然。

作者不得依赖 CSS 定位所暗示的视觉连接来从语义上链接元素。如果没有适当的标记，视觉上链接的元素在 DOM 上没有任何有意义的关系——如果它们确实存在有意义的关系，这可能会使它们在非视觉用户代理（如屏幕阅读器）中，或在非图形导航模式（如标签导航）中变得难以使用或无法使用。

Web 平台上的许多现有及即将推出的功能允许显式建立语义连接，以便非视觉用户代理也能从中受益。例如，HTML 中的弹出层 API (Popover API) 会自动将触发按钮与弹出层元素链接，包括自动调整 Tab 键顺序；它还将触发按钮确立为弹出层的隐含锚点元素，从而也使得使用锚点定位变得容易。

添加一个弹出层示例。

在更通用的情况下，锚点元素上的 aria-details 或 aria-describedby 属性等 ARIA 功能可以以稍微手动的方式创建连接。配合定位元素上的 role 属性，它允许非视觉用户代理向用户告知元素之间的关系，并让他们自动在元素之间导航。

然而，作者也不应该过度使用此类功能，因为用额外、不必要的语义连接使页面过载也可能使页面难以理解。

欢迎提出改善本节的方法建议，特别是作者指南和常见用例的最佳实践示例。[Issue #10311]

8. DOM 接口

8.1. CSSPositionTryRule 接口

CSSPositionTryRule 接口代表 @position-try 规则。

[Exposed=Window]
interface CSSPositionTryRule : CSSRule {
  readonly attribute CSSOMString name;
  [SameObject, PutForwards=cssText] readonly attribute CSSPositionTryDescriptors style;
};

[Exposed=Window]
interface CSSPositionTryDescriptors : CSSStyleDeclaration {
  attribute CSSOMString margin;
  attribute CSSOMString marginTop;
  attribute CSSOMString marginRight;
  attribute CSSOMString marginBottom;
  attribute CSSOMString marginLeft;
  attribute CSSOMString marginBlock;
  attribute CSSOMString marginBlockStart;
  attribute CSSOMString marginBlockEnd;
  attribute CSSOMString marginInline;
  attribute CSSOMString marginInlineStart;
  attribute CSSOMString marginInlineEnd;
  attribute CSSOMString margin-top;
  attribute CSSOMString margin-right;
  attribute CSSOMString margin-bottom;
  attribute CSSOMString margin-left;
  attribute CSSOMString margin-block;
  attribute CSSOMString margin-block-start;
  attribute CSSOMString margin-block-end;
  attribute CSSOMString margin-inline;
  attribute CSSOMString margin-inline-start;
  attribute CSSOMString margin-inline-end;
  attribute CSSOMString inset;
  attribute CSSOMString insetBlock;
  attribute CSSOMString insetBlockStart;
  attribute CSSOMString insetBlockEnd;
  attribute CSSOMString insetInline;
  attribute CSSOMString insetInlineStart;
  attribute CSSOMString insetInlineEnd;
  attribute CSSOMString top;
  attribute CSSOMString left;
  attribute CSSOMString right;
  attribute CSSOMString bottom;
  attribute CSSOMString inset-block;
  attribute CSSOMString inset-block-start;
  attribute CSSOMString inset-block-end;
  attribute CSSOMString inset-inline;
  attribute CSSOMString inset-inline-start;
  attribute CSSOMString inset-inline-end;
  attribute CSSOMString width;
  attribute CSSOMString minWidth;
  attribute CSSOMString maxWidth;
  attribute CSSOMString height;
  attribute CSSOMString minHeight;
  attribute CSSOMString maxHeight;
  attribute CSSOMString blockSize;
  attribute CSSOMString minBlockSize;
  attribute CSSOMString maxBlockSize;
  attribute CSSOMString inlineSize;
  attribute CSSOMString minInlineSize;
  attribute CSSOMString maxInlineSize;
  attribute CSSOMString min-width;
  attribute CSSOMString max-width;
  attribute CSSOMString min-height;
  attribute CSSOMString max-height;
  attribute CSSOMString block-size;
  attribute CSSOMString min-block-size;
  attribute CSSOMString max-block-size;
  attribute CSSOMString inline-size;
  attribute CSSOMString min-inline-size;
  attribute CSSOMString max-inline-size;
  attribute CSSOMString placeSelf;
  attribute CSSOMString alignSelf;
  attribute CSSOMString justifySelf;
  attribute CSSOMString place-self;
  attribute CSSOMString align-self;
  attribute CSSOMString justify-self;
  attribute CSSOMString positionAnchor;
  attribute CSSOMString position-anchor;
  attribute CSSOMString positionArea;
  attribute CSSOMString position-area;
};

其 name 属性代表在规则前奏中声明的名称。

其 style 属性代表在规则主体中声明的属性，按指定顺序。获取时，它必须返回一个用于 @position-try @规则的 CSSPositionTryDescriptors 对象，具有以下属性：

计算标志

未设定

只读标志

未设定

declarations

规则中声明的描述符，按指定顺序。

父 CSS 规则

上下文对象。

所有者节点

Null

9. 附录：样式与布局交错

样式与布局交错 (Style & layout interleaving) 是一种技术，其中样式更新可以在布局过程中发生在子树上，从而导致元素计算样式的回溯更新。

这不是此概念的正确规范，它可能应该放在层叠 (Cascade) 中，但我需要一个草图来参考。

注意：样式与布局交错已用于容器查询 (container queries) 和容器查询长度。像 10cqw 这样的长度使用关于查询容器尺寸的布局信息解析为计算长度，因此当容器在布局之间改变大小时，可以触发过渡。

已接受的 @position-try 属性在解析回退（参见 position-try）时也是交错的。

显然这需要填充更多的细节，但目前“表现得像你在容器查询中已经做的那样”就足够了。这种行为也是未定义的，但至少它是（在某种程度上）可互操作的。

10. 安全考虑

针对本文档尚未提出任何安全问题。

11. 隐私考虑

针对本文档尚未提出任何隐私问题。

12. 变更

自 2026 年 1 月 30 日工作草案以来的重大变更

• 向 position-area 添加了 match-parent 值。（Issue 8913）

• 将 position-area 标记为可离散动画。（Issue 13577）

• 从 align-items 和 justify-items 中移除了 anchor-center，因为这些属性无论如何对绝对定位的盒子都没有影响。（Issue 13514）

自 2025 年 12 月 22 日工作草案以来的重大变更

• 澄清了定位回退与过渡和动画的交互。（Issue 13048）

• 澄清了对于 anchors-visible，交集必须是非零的（当锚点盒子非零时）。（Issue 13176）

• 更改锚点查找方式，使其优先查找祖先，若失败才查找其他元素。这与时间轴名称查找更一致。（Issue 13364）

• 添加了 position-anchor: normal 作为新的初始值。（Issue 13067）

自 2025 年 10 月 7 日工作草案以来的重大变更

• 向 position-try-fallbacks 添加了 flip-x 和 flip-y。（Issue 12869）

• 定义 anchor-center 同时也使用可滚动的包含块，以便当位于本地包含块之外时，它不会触发溢出对齐。（Issue 12952）

• 由于 HTML UA 针对弹出层的默认样式表规则考虑不周，当 position-area 或 anchor-center 生效时，将 auto 外边距解析为零。同时放弃了之前尝试解决此问题的 dialog 对齐值。（Issue 10258）

• 为 position-anchor 添加了 none 值并将其作为初始值，以避免将所有拥有隐含锚点元素的绝对定位盒子切换为使用可滚动的包含块。注意初始值可能会再次更改，因为讨论仍在进行中...（Issue 13067）

• 澄清 flip-block、flip-inline 和 flip-start 使用书写模式 (writing mode) 的包含块。（Issue 12869, Issue 13076）

• 澄清 auto inset 值在查找嵌入修改后的包含块尺寸以在 position-try-order 中比较定位选项时被视为零。（Issue 12942）

• 将 clip-path 添加到为 anchors-visible 考虑的剪裁效果列表中，并澄清了其检查时机。（Issue 12732）

• 修复了基础样式被意外排除在定位选项列表之外的错误。（Issue 12890）

• 澄清 anchors-visible 检查的时机。（Issue 12732）

• 澄清基于 position-area 值的 normal 对齐解析会影响使用值（这进而会通过 [CSS-ALIGN-3] 来决定如何处理溢出）。

• 修复了要求匹配树根进行锚点名称匹配的算法错误，因为有时可以在阴影树边界进行匹配。（Issue 12941）

• 澄清 auto inset 值在查找嵌入修改后的包含块尺寸以用于 position-try-order 时被视为零。（Issue 12942）

• 重组 § 6 溢出管理 和 § 2 确定锚点 中的文字以提高可读性。（Issue 12818, Issue 11022）

• 改进 § 7 可访问性影响 中的指南并澄清 UA 要求。（Issue 10311）

• 改进示例。

另请参阅 以前的变更。