position-area

position-area プロパティは、アンカーボックスを中心とした、3×3 のグリッドを想定し、そのグリッドに対してどのようにボックスを配置するかを指定します。

position-area プロパティを使用することで、グリッド内でボックスの配置を直感的に設定することが可能になります。

指定できる値は下記の通りです。

none	配置を行いません。（既定値）
<position-area>	グリッドに対してどのように配置を行うかをあらかじめ定義されたキーワード値で指定します。値は1つ、もしくはX軸、Y軸に対応する値を組み合わせて2つまで指定することができます。 なお、要素が既定のアンカーボックスを持たない、または絶対位置ボックスでない場合、この値は意味を持ちません。

<position-area>

<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 | 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}
]

下記の各値を単体で、あるいは、組み合わせて使用できます。

（1）X軸（横方向）の位置を指定するのに使用できる値

• 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

（2）Y軸（縦方向）の位置を指定するのに使用できる値

• 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

（3）上記、（1）と（2）の値を空白で区切って2つ組み合わせた指定

例えば下記のように指定します。

.content{
  position-anchor: --exampleAnchor;
  position: absolute;
  position-area: top center;
}

（4）親要素の書字方向に基づいてブロック軸（縦方向）の位置を指定するのに使用できる値

• block-start
• center
• block-end
• span-block-start
• span-block-end
• span-all

（5）親要素の書字方向に基づいてインライン軸（横方向）の位置を指定するのに使用できる値

• inline-start
• center
• inline-end
• span-inline-start
• span-inline-end
• span-all

（5）上記、（4）と（5）の値を空白で区切って2つ組み合わせた指定

例えば下記のように指定します。

.content{
  position-anchor: --exampleAnchor;
  position: absolute;
  position-area: block-start inline-end;
}

（6）要素自身の書字方向に基づいてブロック軸（縦方向）の位置を指定するのに使用できる値

• self-block-start
• center
• self-block-end
• span-self-block-start
• span-self-block-end
• span-all

（7）要素自身の書字方向に基づいてインライン軸（横方向）の位置を指定するのに使用できる値

• self-inline-start
• center
• self-inline-end
• span-self-inline-start
• span-self-inline-end
• span-all

（8）上記、（6）と（7）の値を空白で区切って2つ組み合わせた指定

例えば下記のように指定します。

.content{
  position-anchor: --exampleAnchor;
  position: absolute;
  position-area: span-self-block-start center;
}

（9）親要素の書字方向に基づいてブロックまたはインライン方向の位置を指定するのに使用できる値

• start
• center
• end
• span-start
• span-end
• span-all

（10）上記、（9）の値を空白で区切って2つ組み合わせた指定

例えば下記のように指定します。

.content{
  position-anchor: --exampleAnchor;
  position: absolute;
  position-area: start center;
}

（11）要素自身の書字方向に基づいてブロックまたはインライン方向の位置を指定するのに使用できる値

• self-start
• center
• self-end
• span-self-start
• span-self-end
• span-all

（12）上記、（11）の値を空白で区切って2つ組み合わせた指定

例えば下記のように指定します。

.content{
  position-anchor: --exampleAnchor;
  position: absolute;
  position-area: self-end span-all;
}

指定する値ごとの配置例

以下に、各値を指定した場合の実際の配置例について、画像で掲載しています。書字方向に依存する値については、親要素、または要素自身に指定された書字方向によって異なります。

値を単体で指定

2つの値の組み合わせ

.content{
  position-anchor: --exampleAnchor01;
  position: absolute;
  position-area: top span-all;
}

IE11	×
Edge（EdgeHTML）	×
Edge（Chromium）	○
Chrome	○
Firefox	×
Safari	×
iOS Safari	×
Android Chrome	○