<position-area>

<position-area> = [
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ]
||
  [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-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 | self-block-end | span-self-block-start | span-self-block-end | span-all ]
||
  [ self-inline-start | 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}
]

位置区域基于 **位置区域网格** 的概念，这是一个由四条网格线（每条轴两条）组成的 3x3 网格，锚元素是中心网格。

当用作定位元素的 position-area 属性的值时，中心网格的尺寸由元素的默认锚元素的 包含块 定义。网格外边缘的尺寸由定位元素的包含块定义。逻辑关键词通常基于包含块的书写模式和方向，除了 self-* 关键词，它们是从锚定位元素的书写模式计算出来的。

网格单元格被分成行和列。

• 三行由物理值 top、center 和 bottom 表示。它们也具有逻辑等价物，如 block-start、center 和 block-end，以及坐标等价物 — y-start、center 和 y-end。
• 三列由物理值 left、center 和 right 表示。它们也具有逻辑等价物，如 inline-start、center 和 inline-end，以及坐标等价物 — x-start、center 和 x-end。

<position-area> 值包含一个或两个关键词，定义了位置区域网格的特定区域。在定位元素上设置 position-area 值会将其包含块放置在指定的网格区域。

/* Examples: Two keywords to place the element in a single specific tile */
position-area: top left;
position-area: bottom right;
position-area: start end;
position-area: center end;
position-area: block-start center;
position-area: inline-start block-end;
position-area: x-start y-end;
position-area: center y-self-end;

/* Examples: Two keywords to span the element across two tiles */
position-area: top span-left;
position-area: span-bottom right;
position-area: center span-start;
position-area: inline-start span-block-end;
position-area: y-start span-x-end;

/* Examples: Two keywords to span the element across three tiles */
position-area: top span-all;
position-area: block-end span-all;
position-area: x-self-start span-all;

/* Examples: One keyword with an implicit second keyword  */
position-area: top; /* equiv: top span-all */
position-area: inline-start; /* equiv: inline-start span-all */
position-area: center; /* equiv: center center */
position-area: span-all; /* equiv: center center */
position-area: start; /* equiv: start start */
position-area: end; /* equiv: end end */

可以使用不同类型的关键词，包括

• 物理网格关键字
• 通用逻辑行和列关键词
• 显式内联和块逻辑关键词
• 坐标网格关键字

物理网格关键词使用物理值指定 position-area 网格的单元格或部分。这些值不受 writing-mode 或 direction 设置的影响。

使用物理行和列关键词，您可以从下面两个列表中分别指定一个关键词来选择一个特定的网格单元格。

• top、center 或 bottom：网格的顶部、中心或底部行。
• left、center 或 right：网格的左侧、中心或右侧列。

例如，top left 选择左上角的单元格，而 center right 选择右侧列的中心单元格。

物理跨越关键词 — 与物理行或列关键词组合时 — 为位置区域指定第二个网格单元格以扩展到其中。当将此类组合设置为 position-area 属性值时，所选元素最初放置在指定行或列的中心；然后它沿跨越关键词中指定的方向跨越，跨越两个网格单元格。

span-left

跨越网格的中心列和左侧列。

span-right

跨越网格的中间列和右侧列。

span-top

跨越网格的中间行和顶行。

span-bottom

跨越网格的中间行和底行。

span-all

适用于所有关键字类型，跨越列出的单元格以及同一行或列中的相邻单元格。请参阅下面 span-all。

例如，top span-left 跨越顶部中间和顶部左侧的网格单元格。

如果仅在 position-area 值中指定单个物理关键字，则另一个值将隐含如下

left、right、top 或 bottom

另一个值默认为 span-all，导致元素跨越其最初放置在其中的网格或行的所有三个单元格。例如，left 等效于 left span-all。

center、span-left、span-right、span-top 或 span-bottom

另一个值默认为 center。例如，span-left 等效于 center span-left，而 center 等效于 center center。

逻辑网格关键字使用逻辑值指定位置区域网格的区域。使用这些值时，位置和方向会受到元素的 writing-mode 和 direction 设置的影响 包含块 或，对于 self 关键字，定位元素本身。逻辑关键字有两种类型：通用和显式。

通用逻辑关键字使用相同术语表示内联和块方向，方向由关键字在 <position-area> 值对中的位置决定。第一个值定义块方向位置，第二个值定义内联值。您可以从以下列表中指定一个或两个关键字。从该列表中指定两个关键字定义单个特定网格单元格。关键字位置或方向为

start

网格的块或内联方向的开头，根据包含块的书写模式计算。

end

网格的块或内联方向的结尾，根据包含块的书写模式计算。

self-start

网格的块或内联方向的开头，根据元素自己的书写模式计算。

self-end

网格的块或内联方向的结尾，根据元素自己的书写模式计算。

center

网格的块方向（如果此关键字首先指定）或内联方向（如果此关键字其次指定）的中心。

例如，start end 和 self-start self-end 都描述了块方向开头和内联方向结尾的位置。如果设置了 writing-mode: horizontal-tb，则这是锚元素的右上角，而如果设置了 writing-mode: vertical-rl，则这是锚元素的右下角。

通用逻辑跨越行和列关键字

通用逻辑跨越关键字 - 当与逻辑行或列关键字组合时 - 为位置区域指定第二个网格单元格以扩展到其中。当将此类组合设置为 position-area 属性值时，选定的元素最初放置在指定行或列的中心，然后沿跨越关键字中指定的方向跨越，跨越两个网格单元格

span-start

跨越中心单元格和网格行/列的起始单元格，方向指的是元素包含块的书写模式。

span-end

跨越中心单元格和网格行/列的结束单元格，方向指的是元素包含块的书写模式。

span-self-start

跨越定位元素自身书写模式的网格行/列的中心单元格和起始单元格。

span-self-end

跨越网格行/列的中心单元格和结束单元格，根据元素自己的书写模式计算。

例如，start span-end 和 self-start span-self-end 都指定一个网格位置区域，该区域从起始块行的中心开始，并跨越该行中位于内联中心和结束列的单元格。如果设置了 writing-mode: horizontal-tb，则它将跨越锚的顶部中心和右上角，而如果设置了 writing-mode: vertical-rl，则它将跨越元素的右侧中心和右下角。

显式内联和块逻辑行和列关键字明确引用块（行）或内联（列）位置。您可以为块方向和内联方向指定一个关键字以选择单个特定网格单元格。与通用逻辑关键字值不同，关键字顺序无关紧要。但是，在同一轴上声明两个关键字会使值无效。

block-start

网格的块方向的开头，根据包含块的书写模式计算。

block-end

网格的块方向的结尾，根据包含块的书写模式计算。

inline-start

网格的内联方向的开头，根据包含块的书写模式计算。

inline-end

网格的内联方向的结尾，根据包含块的书写模式计算。

例如，block-start inline-end 指定块方向开头和内联方向结尾处的单元格。如果设置了 writing-mode: horizontal-tb，则它将是锚的右上角的单元格，而如果设置了 writing-mode: vertical-rl，则它将是右下角的单元格。

显式内联和块逻辑跨越关键字

显式逻辑跨越关键字 - 当与逻辑行或列关键字组合时 - 为位置区域指定第二个网格单元格以扩展到其中。当将此类组合设置为 position-area 属性值时，选定的元素最初放置在指定行或列的中心，基于包含块的书写模式，然后沿跨越关键字中指定的方向跨越，跨越两个网格单元格

span-block-start

跨越指定内联列的中心单元格和 block-start 单元格。

span-block-end

跨越指定内联列的中心单元格和 block-end 单元格。

span-inline-start

跨越指定块行的中心单元格和 inline-start 单元格。

span-inline-end

跨越指定块行的中心单元格和 inline-end 单元格。

例如，block-end span-inline-start 选择结束块行的中心单元格，并跨越该行中位于内联中心和起始列的单元格。如果设置了 writing-mode: horizontal-tb，则它将跨越底部中心和底部左侧的网格单元格，而如果设置了 writing-mode: vertical-rl，则它将跨越左侧中心和顶部左侧的网格单元格。

如果仅指定单个逻辑 <position-area> 关键字，则另一个值将隐含如下

start、end、self-start 或 self-end

另一个值默认为与第一个值相同，选择起始行和列或结束行和列的网格单元格。

span-start、span-self-start、span-end、span-self-end

另一个值默认为 center。例如，span-start 等效于 span-start center。

block-start、block-end、inline-start、inline-end

另一个值默认为 span-all，跨越列或行集的所有三个单元格。例如，block-start 等效于 block-start span-all。

span-block-start、span-block-end、span-inline-start、span-inline-end

另一个值默认为 center。例如，span-inline-start 等效于 span-inline-start center。

这些关键字使用 x 和 y 坐标值指定 position-area 网格的单元格。其位置/方向将受到元素的 writing-mode 和/或 direction 设置的影响 包含块 或，对于 self 关键字，元素本身。

但是，网格单元格是根据物理轴而不是块/内联方向定义的

• 对于 writing-mode: horizontal-tb 和 vertical-lr，x 轴从左到右运行，y 轴从上到下运行。
• 对于 writing-mode: horizontal-tb; direction: rtl 和 writing-mode: vertical-rl，x 轴从右到左运行，y 轴从上到下运行。

使用坐标行和列关键字，您可以从 x 轴和 y 轴指定一个关键字来定义单个特定网格单元格。

x 轴关键字包括

x-start

网格 x 轴的起始单元格，根据包含块的书写模式计算。

x-end

网格 x 轴的结束单元格，根据包含块的书写模式计算。

x-self-start

网格 x 轴的起始单元格，根据元素自己的书写模式计算。

x-self-end

网格 x 轴的结束单元格，根据元素自己的书写模式计算。

center

网格 x 轴的中心，根据元素自己的书写模式计算。

y 轴关键字包括

y-start

网格 y 轴的起始单元格，根据包含块的书写模式计算。

y-end

网格 y 轴的结束单元格，根据包含块的书写模式计算。

y-self-start

网格 y 轴的起始单元格，根据元素自己的书写模式计算。

y-self-end

网格 y 轴的结束单元格，根据元素自己的书写模式计算。

center

网格 y 轴的中心，根据元素自己的书写模式计算。

例如，x-end y-start 和 x-self-end y-self-start 都选择 x 轴末端和 y 轴开头的网格单元格。如果设置了 writing-mode: horizontal-tb，则它将是锚的右上角的单元格，而如果设置了 writing-mode: vertical-rl，则它将在左上角。

当与坐标行或列关键字组合使用时，跨坐标关键字会指定位置区域扩展到的第二个网格单元格。当这种组合被设置为position-area属性值时，选定的元素最初放置在指定行或列的中心，然后根据跨越关键字中指定的方位进行跨越，跨越两个网格单元格。

span-x-start

跨越指定 y 轴行的中心单元格和 x 起始单元格。

span-x-end

跨越指定 y 轴行的中心单元格和 x 结束单元格。

span-y-start

跨越指定 x 轴列的中心单元格和 y 起始单元格。

span-y-end

跨越指定 x 轴列的中心单元格和 y 结束单元格。

例如，y-end span-x-end 选择末尾 y 行中心的单元格，并跨越该行中位于 x 中心和 x 结束列的单元格。当设置writing-mode: horizontal-tb时，位置网格区域将跨越底部中心和底部右边的网格单元格，而当设置writing-mode: vertical-rl时，它将跨越底部中心和底部左边的单元格。

如果只指定了一个坐标网格<position-area>关键字，则另一个值将按如下方式隐含：

x-start、x-self-start、x-end、x-self-end、y-start、y-self-start、y-end或y-self-end

另一个值默认为span-all，选择跨越其最初放置所在的列或行所有三个单元格的网格单元格。例如，x-start等价于x-start span-all。

span-x-start、span-x-end、span-y-start或span-y-end

另一个值默认为 center。例如，span-start 等效于 span-start center。

span-all是一个特殊的关键字，可用于上面各节中列出的所有行和列关键字。当您指定两个值（一个行/列关键字和span-all）时，元素将放置在指定的行或列中，然后跨越该行或列中的所有单元格。

请参阅position-area属性页面。

有关锚点功能和用法的详细信息，请参阅CSS 锚点定位模块登录页面和使用 CSS 锚点定位指南。

• position-area
• anchor-name
• position-anchor
• anchor() 函数
• 使用 CSS 锚点定位指南
• 处理溢出：尝试回退和条件隐藏指南
• CSS 锚点定位模块