CSS Reference

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

指定する値ごとの配置例

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

値を単体で指定

position-area プロパティによる配置例
top、right、bottom、left、center 値をそれぞれ単体で指定した例
position-area プロパティによる配置例
y-start、y-end、x-start、x-end 値をそれぞれ単体で指定した例
position-area プロパティによる配置例
self-start、self-end、y-self-start、y-self-end、x-self-start、x-self-end 値をそれぞれ単体で指定した例
position-area プロパティによる配置例
start、end、block-start、block-end、inline-start、inline-end 値をそれぞれ単体で指定した例
position-area プロパティによる配置例
span-top、span-right、span-bottom、span-left 値をそれぞれ単体で指定した例
position-area プロパティによる配置例
span-x-start、span-x-end、span-y-start、span-y-end 値をそれぞれ単体で指定した例
position-area プロパティによる配置例
span-start、span-end、span-all 値をそれぞれ単体で指定した例
position-area プロパティによる配置例
span-self-start、span-self-end 値をそれぞれ単体で指定した例

2つの値の組み合わせ

position-area プロパティによる配置例
top center など、X軸、Y軸、それぞれの値を組み合わせて指定した例
position-area プロパティによる配置例
span-bottom left など、X軸、Y軸、それぞれの値を組み合わせて指定した例
position-area プロパティによる配置例
start center など、書字方向に基づいてブロック、またはインライン方向の位置を指定する値を組み合わせた例
position-area プロパティによる配置例
block-start inline-start など、書字方向に基づいてブロック、またはインライン方向の位置を指定する値を組み合わせた例

関連項目

anchor() 関数、anchor-size() 関数の解説も合わせて参照してください。

position-areaの仕様

初期値
  • none
対象となる要素
  • 既定のアンカーボックスを使用して配置されるボックス
継承
  • なし

position-areaのサンプルソース

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

主要ブラウザの対応

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

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome