CSS - position-area

概要

属性名 position-area
値 none | <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} ]
初期値none
適用可能要素position-anchor を指定した要素
継承継承しない
サポートhttps://caniuse.com/mdn-css_properties_position-area

説明

アンカーポジショニングにおいてポジション要素の位置を指定します。詳細は「とほほのアンカーポジショニング入門」を参照してください。

none
位置を指定しません。
<position-area>
ポジション要素の縦位置と横位置を指定します。
  • top, bottom, left, right, center は上下左右、中央を意味します。
  • x は横方向、y は縦方向を意味します。
  • block は文章の改行方向(横書きの場合は縦)、inline は文章の進行方向(横書きの場合は通常横)を意味します。
  • start は文章の開始方向(通常左や上)、end は文章の終了方向(通常右や下)を意味します。
  • span は隣接する複数のブロックにまたがることを意味します。
  • self は配置ボックス自身の方向を基準とすることを意味します。

使用例

CSS
.my-anchor {
  position-area: --my-anchor;
  position-area: bottom span-right;
}

リンク

Copyright (C) 2024 杜甫々
初版：2024年12月22日、最終更新：2024年12月22日
https://www.tohoho-web.com/css/prop/position-area.htm