CSS 锚点定位模块 第1级

1. 介绍

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

.anchor {
  anchor-name: --tooltip;
}
.tooltip {
  /* Fixpos 意味着我们不需要考虑包含块的关系；
     工具提示可以存在于 DOM 的任何地方。 */
  position: fixed;

  /* 所有锚定行为默认都会引用 --tooltip 锚点。 */
  position-anchor: --tooltip;

  /* 让工具提示的底部对齐到锚点顶部；
     这也会默认使工具提示和锚点（在水平方向的书写模式下）水平居中对齐。 */
  position-area: block-start;

  /* 如果工具提示溢出窗口则会自动切换，
     使其顶部对齐到锚点底部。 */
  position-try: flip-block;

  /* 防止过宽 */
  max-inline-size: 20em;
}

.tooltip {
  /* 使用 popover + popovertarget 属性会设置 'position: fixed'，
     并已自动建立所需的 position-anchor 关系。 */
  position-area: block-start;
  position-try: flip-block;
  max-inline-size: 20em;
}

1.1. 值定义

本规范遵循 CSS 属性定义约定 （见 [CSS2]）， 并采用 值定义语法 （见 [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 属性声明 该元素是一个 锚点元素， 其 主盒 是一个 锚点框， 并为其指定一组 锚点名称 以供引用。 其值定义如下：

none

该属性不产生效果。

<dashed-ident>#

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

否则，该属性不产生效果。

锚点名称 不需要唯一。 不是所有元素都可以作为 某个盒子的 目标锚点元素。 因此，如果作用域合适，则一个名称可以复用于多个地方。

注：如果多个元素共享一个 锚点名称， 且对某个定位盒都可见， 那么 目标锚点元素 将为 DOM 顺序中的最后一个。 可以用 anchor-scope 属性进一步限制某个引用盒可见的名称。

锚点名称 默认不受 包含 影响； 即使元素有 样式 或 布局包含 （或类似包含）， 其后代的 锚点名称 依然对页面其他元素可见。

注：当元素处于另一个元素的 跳过内容 中时 （例如由 content-visibility: hidden 造成）， 它不是 可接受锚点元素， 实际等效于没有名称。

注： Shadow DOM 里的定位元素 可以引用“上级”树中定义的 锚点名称。 目前还不能引用“下级” shadow 树中定义的 锚点名称。

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

该属性将指定的 锚点名称 及其查找限制在此元素的子树内。 见 § 2 锚点的确定。

值含义如下：

none

锚点名称 作用域不变。

all

指定该元素或其后代中定义的所有 锚点名称（未被后代自身指定 anchor-scope 的限制除外）只在该元素的后代中可见； 并且限制后代只能在当前子树内匹配 锚点名称 到 锚点元素。

此值只影响同一树作用域内的 锚点名称，等价于指定为 严格匹配的 树作用域名称。 （即 anchor-scope: all 行为与 anchor-scope: --foo, --bar, ... 指定所有相关 锚点名称 相同。）

<dashed-ident>

指定该元素或其后代中定义且未被后代 anchor-scope 限制的匹配 锚点名称，只在该元素的后代中可见； 并且限制后代只能在当前子树内将这些 锚点名称 匹配到 锚点元素。

<dashed-ident> 代表 严格匹配的 树作用域名称， 即只能与同一 Shadow Tree 内的 锚点名称 匹配。[CSS-SCOPING-1]

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

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 的一部分。

none

该盒没有 默认锚点元素。

auto

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

<anchor-name>

由指定 锚点名称 选中的锚点元素，作为该盒的 默认锚点元素。

我们可能希望把初始值设得更智能一些， 根据 position-area 是否使用，在 none 和 auto 之间自动选择。[Issue #13067]

默认锚点元素的 主盒 即为该盒的 默认锚点框。

.anchored {
  position: absolute;
  top: calc(.5em + anchor(outside));
  /* 未指定 anchor name，
     因此默认会引用
     默认锚点框。 */
}

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

2.4.1. 隐式锚点元素

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

TODO: 待 HTML 规范正式收录相关内容后，补充 popover 相关新例子

隐式锚点元素 可通过 auto 关键字在 position-anchor 中引用， 或在 锚点函数 中省略锚点引用时引用之。

对于 伪元素，其 隐式锚点元素 是其 起始元素，除非另有说明。

2.5. 锚点相关性

判断元素 el 是否 与用户相关 时， 如果其某个后代作为定位盒的 目标锚点元素 （且该定位盒自身不是 被跳过 的， 且其 包含块 不是 el 或 el 的后代）， 则必须认为 el 与用户相关。

注： 这意味着，例如， content-visibility: auto 子树里的锚点， 只要依赖它的定位盒本身也不是被跳过的， 就会阻止其子树 被跳过内容。 （除非锚点和定位盒都在同一个 content-visibility: auto 元素之下； 二者不会互相循环保持可见。）

3. 基于锚点的定位

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

position-area 属性提供了基于网格的便捷方式以便于相对于 默认锚点框 定位； 如需更复杂或相对于多个盒子的定位， 可在 内边距属性 中通过 anchor() 函数显式引用某锚点框的边。

3.1. position-area 属性

大多数 锚点定位 的常见用例只关注 定位盒的 包含块 边界 及 默认锚点框 的边界。 可以把这些线看作构成了一个 3×3 网格； position-area 让你可以轻松指定 要将定位盒铺放在这个 position-area grid 中的哪个区域。

none

该属性无效果。

<position-area>

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

否则，选择 position-area grid 的一个区域， 并将其作为该盒的 包含块。

注： 这意味着 内边距属性 表示相对 position-area 的偏移， 并且一些属性值（如 max-height: 100%） 也将相对于 position-area。

除 none 外的值还具有如下效果：

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

• 任何 auto 内边距属性 及 auto margin 属性 的 used value 均解析为 0。

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

3.1.1. 解析 Position Area 网格

position-area 网格是一个 3×3 的网格， 每个轴由四条网格线组成。 顺序如下（使用 包含块的书写模式）：

• 盒子修改前 包含块的 start 边， 或 默认锚点盒子的 start 边， 如果后者更靠 start 方向

• 默认锚点盒子的 start 边

• 默认锚点盒子的 end 边

• 盒子修改前 包含块的 end 边， 或 默认锚点盒子的 end 边， 如果后者更靠 end 方向。

注意: 当 默认锚点盒子 部分或全部在修改前的 包含块之外时， position-area 网格的某些行或列可能为零尺寸。

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> 取值通过如下方式指定所选区域占据的网格行和列，从而选中 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> 的计算值与序列化

计算值为两个关键字，分别指明每个轴选中的区段， 长（block-start）和短（start）逻辑关键字视为等价。 按上方语法顺序序列化， 逻辑关键字用短形式 （如 start start 而不是 block-start inline-start）。

3.2. 锚点相对内边距：anchor() 函数

绝对定位盒 可以在其 内边距属性中 使用 anchor() 函数 以引用一个或多个 锚点框 的位置。 anchor() 函数会被解析为 <length>。 它只能用于内边距属性中 （否则无效）。

<anchor()> = anchor( <anchor-name>? && <anchor-side>, <length-percentage>? )
<anchor-name> = <dashed-ident>
<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 属性变化等。

.centered-message {
  position: fixed;
  max-width: max-content;
  justify-self: center;

  --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));
  bottom: anchor(--x top);
}

3.2.1. anchor() 的解析

仅当同时满足全部以下条件时，anchor() 函数才是 可解析锚点函数：

• 应用于绝对定位盒。

• 如果其 <anchor-side> 指定的是物理关键字， 则它出现在适用于该轴向的 内边距属性 中。 （例如 left 只能用于 left、right 或水平方向的逻辑内边距属性。）

• 其对应的盒存在 目标锚点元素， 并且函数内指定的 <anchor-name> 能找到该目标元素。

如有任一条件不成立， anchor() 函数解析为其指定的回退值。如果未指定回退值， 该属性声明在计算值阶段视为无效。

3.3. 考虑滚动因素

出于性能考虑， 实现通常会在独立的滚动/“合成”线程上处理滚动， 而该线程仅具有限制的能力（可进行简单移动/变换等，但不能布局或执行高开销操作）， 因此可以对滚动反应得足够快，在用户看来近似“即时”。

如果滚动仅导致锚点定位元素移动， 理论上没有问题； 元素的移动完全可在滚动线程中执行， 使定位元素能和滚动内容同步平滑移动。 但锚点定位允许元素 使其对边的位置取决于不同滚动上下文中的内容， 这意味着滚动可能只移动某一边，从而导致尺寸改变，引发布局。 这种操作无法由滚动线程处理！

为兼顾性能与灵活锚定的需求， 锚点定位 结合使用记忆滚动偏移 与滚动补偿。

上述机制允许被定位元素根据其 锚点引用 的滚动位置响应一次， 但后续如果发生滚动，定位元素不会再继续与其保持锚定 （但依然会响应锚元素的非滚动移动）。 这个问题无法彻底解决， 但我们可以选择对一组 锚点引用的滚动做出响应—— 即优先选择 默认锚点元素：

4. 基于锚点的对齐

4.1. 区域特定默认对齐

当 position-area 不是 none 时， 已用值 的 normal 自对齐 会根据 <position-area> 的值变化， 以便让盒子朝向锚点对齐：

• 如果某轴上只选中了 center 轨道， 则该轴上的默认对齐为 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 Overflow Alignment: the safe and unsafe keywords and scroll safety limits。

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() 解析为其回退值。 无回退值时，引用它的声明在计算值阶段 失效。

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;

  /* popover 宽度不少于按钮宽 */
  min-width: anchor-size(width);

  /* popover 高度不少于 2 个菜单项 */
  min-height: 6em;
}

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

该属性提供了一组可选定位样式， 当 绝对定位盒 溢出其 内边距修饰包含块 时会依次尝试。 这个 定位选项列表 最初只包含由元素的 回退基础样式（即不应用 position-try-fallbacks 时的 计算样式）生成的唯一一个 定位选项。

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

各值含义如下：

none

该属性无效果； 该盒的 定位选项列表为空。

<dashed-ident>

如果有同名的 @position-try 规则， 其对应 定位选项 会加入 定位选项列表。

否则该值没有效果。

<try-tactic>

通过 执行指定 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. 确定回退顺序：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 值视为 0）。 将 定位选项列表 稳定排序，最大尺寸排前。

逻辑方向以 书写模式和 包含块 解析。

.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 中的属性 都以 Position Fallback Origin 的身份应用到盒子上， 这是一个新的 层叠源， 介于 作者源 与 动画源 之间。

类似 动画源， 若值为 revert， 则视为该属性属于 作者源， 因此将回退到 用户源。 （和 动画源 一样， revert-layer 无特殊行为，按原样处理。）

注： @position-try 可接受属性 是仅影响盒子自身尺寸和定位的最小属性集合，不会影响其内容和其他样式。 这显著简化了位置回退的实现，并确保可根据可用空间移动锚定定位盒。 由于这些规则会覆盖 作者源 中的正常声明， 所以也降低了 @position-try 对其他属性层叠与继承的干扰。 未来扩展 容器查询 预计会支持基于所用位置回退条件查询元素， 以实现本文限制列表中不支持的条件样式。

注： 若多个元素要共用同一 @position-try 规则， 但各自锚点不同， 可省略 <anchor-name>，在 anchor() 中省略锚点名称， 并分别用 position-anchor 指定。

注： 最常用的回退定位方式（如初步将定位盒放在锚点某一侧，溢出时自动切到另一侧） 可直接用 position-try-fallbacks 关键字自动完成， 无需编写 @position-try。

6.5. 应用位置回退

当一个定位盒 （应用任何 默认滚动平移 后） 溢出其 内边距修饰包含块， 且 定位选项列表 中有多于一个 定位选项 时， 会确定位置回退样式， 以尝试选出不溢出的选项。 选中的样式通过 样式与布局交错机制应用到元素上， 所以会影响 计算值 （可触发过渡等）， 虽然其本身依赖于布局及 已用值。

实现可视情况限制 定位选项列表 长度， 以减少多余布局消耗。此限制至少应为五个。

在一次完整布局过程中， 一旦盒子确定了其回退样式（或确定无需回退）， 后续布局的盒不会更改这一结果。

6.5.1. 回退选项的维护与清除

对盒子的某些更改会直接影响 确定位置回退样式 并触发特殊处理，这些回退敏感更改包括：

• 其 position 计算值变化、包含块关联变化、或不再生成盒。

• 其 position-try 长属性计算值变化。

• 其 @position-try 可接受属性 的计算值变化。

• 任一被引用的 @position-try 规则被增删或修改。

为尽量保证布局稳定， 确定位置回退样式 优先考虑 上一次成功定位选项，规则如下：

6.5.2. 应用位置选项

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

在某些情况下，显示 绝对定位盒 可能没有意义。 此属性允许依据常见布局条件有条件地显示这些盒子。

always

该属性无效果。 （无论锚点或溢出状态如何，盒子都会显示。）

anchors-valid

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

所需锚点引用 是什么？ 指没有回退值的 anchor() 函数； 默认锚点 *有时* 也算在内？ 此处待补充更细说明。

是“任一”锚点缺失就隐藏， 还是“全部”锚点缺失才隐藏？ 两者皆有用例，是否要定规或允许控制？

anchors-visible

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

no-overflow

如盒子即便应用 position-try 后仍溢出其 内边距修饰包含块， 则其 visibility 计算为 force-hidden。

7. 可访问性影响

CSS 锚点定位不会创建、删除或变更元素间的可访问性绑定。 作者需用合适标记手段确保可访问性关系。

由于本特性用法极多， CSS 锚点定位 不会自动在定位盒与其锚点间建立任何语义关系。 例如，设计中的视觉锚定关系 可能正好反映语义锚点； 也可能因视觉效果需要，连接到锚点的祖先、兄弟或后代元素； 也可能视觉上无需锚定却语义上绑定，反之亦然。

作者不应依赖 CSS 定位的可见连接 来建立元素间的语义关系。 若无合适标记支持， 这些仅视觉关联的元素在 DOM 层并无任何实际关系——若实际有语义关系缺乏标记支持， 就会导致如屏幕阅读器或键盘模式等非视觉用户代理难于甚至无法使用这些元素。

Web 平台有许多现有与即将到来的方案， 可用来明确表达语义关联，从而便于非视觉用户代理访问。 比如 HTML Popover API 会自动将触发按钮与 popover 元素关联， 并自动调整 Tab 顺序； 同时还会自动把触发按钮 设为该 popover 的 隐式锚点元素， 从而能直接配合锚点定位使用。

补一个 popover 示例。

更一般地， ARIA 特性如 aria-details 或 aria-describedby 属性 可以让锚点元素建立关联，实现半自动连接。 同时加上定位元素的 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 对象， 其属性如下：

computed flag

未设置

readonly flag

未设置

declarations

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

parent CSS rule

上下文对象

owner node

Null

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

样式与布局交错 是一种技术， 在布局过程中允许对子树进行样式更新， 从而可对元素的 计算样式进行追溯性更新。

此概念并非本规范的正确定义， 可能应移至 Cascade， 但此处需要一个可引用的草稿。

注意: 样式与布局交错 已用于 容器查询 和 容器查询长度。 如 10cqw 这类长度，会根据查询容器的尺寸布局信息解析为 计算长度， 因此当容器在布局间改变尺寸时可触发 过渡。

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

显然还需补充更多细节， 但目前“像容器查询一样处理”即可。 该行为本身也未定义， 但至少在一定程度上已实现互操作。

10. 安全性考虑

本文件尚未发现安全性问题。

11. 隐私性考虑

本文件尚未发现隐私问题。

12. 变更记录

自 2025年10月7日工作草案 以来的主要更改：

• 在 position-try-fallbacks 中新增 flip-x 和 flip-y。 (议题12869)

• 明确 anchor-center 使用 可滚动包含块， 避免其在定位于 本地包含块之外时触发溢出对齐。 (议题12952)

• 为了解决HTML用户代理默认弹出样式表中popovers相关规则带来的不便，规定当 position-area 或 anchor-center 生效时，auto 外边距应视为零值。 同时移除了先前试图解决此问题的 dialog 对齐值。 (议题10258)

• 为 position-anchor 添加 none 值，并将其设为初始值，以避免所有有 隐式锚点元素 的绝对定位盒默认切换为 可滚动包含块。注意初始值仍有可能调整，相关讨论未结束…… (议题13067)

• 明确 flip-block、flip-inline 和 flip-start 使用 书写模式 来自 包含块。 (议题12869, 议题13076)

• 明确 auto inset 值在比较 内边距修饰包含块尺寸用于 定位选项和 position-try-order 时视为零值。 (议题12942)

• 为 anchors-visible 中涉及的裁剪效果列表加入 clip-path，并明确检查时机。 (议题12732)

• 修复基础样式在 定位选项列表 中被遗漏的错误。 (议题12890)

• 明确 anchors-visible 检查的时机。 (议题12732)

• 明确 normal 的对齐解析与 position-area 的值相关，并影响 已用值（进而影响 [CSS-ALIGN-3] 的溢出处理）。

• 修复锚名匹配要求树根一致的算法错误，因为部分情况下可跨shadow tree匹配。 (议题12941)

• 再明确一次 auto inset 值在核算 内边距修饰包含块尺寸以供 position-try-order 时为零。 (议题12942)

• 重组织 § 6 溢出管理 和 § 2 锚点的确定 文案，提高可读性。 (议题12818, 议题11022)

• 完善 § 7 可访问性影响 的引导说明，并明确 UA 要求。 (议题10311)

• 改进部分示例。

另见 先前变更。