<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

跨越指定內聯列的中心瓷磚和塊起始瓷磚。

span-block-end

跨越指定內聯列的中心瓷磚和塊結束瓷磚。

span-inline-start

跨越指定塊行的中心瓷磚和內聯起始瓷磚。

span-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-start 瓷磚。

span-x-end

跨越指定 y 軸行的中心瓷磚和 x-end 瓷磚。

span-y-start

跨越指定 x 軸列的中心瓷磚和 y-start 瓷磚。

span-y-end

跨越指定 x 軸列的中心瓷磚和 y-end 瓷磚。

例如，y-end span-x-end 選擇了結束 y 行中心的瓷磚，並跨越該行中位於 x-center 和 x-end 列的瓷磚。當設定 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 是一個特殊的關鍵字，可與上述各節中列出的所有行和列關鍵字一起使用。當你指定兩個值——一個行/列關鍵字和 span-all 時，元素被放置在指定的行或列中，然後它會跨越該行或列中的所有瓷磚。

示例

請參閱 position-area 屬性頁面。

有關錨點特性的詳細資訊和用法，請參閱 CSS 錨點定位模組登入頁和使用 CSS 錨點定位指南。

規範

瀏覽器相容性

另見

• position-area
• anchor-name
• position-anchor
• anchor() 函式
• 使用 CSS 錨點定位指南
• 溢位時的備選方案和條件隱藏指南
• CSS anchor positioning 模組