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; }
リンク
- https://drafts.csswg.org/css-anchor-position-1/#position-area
- https://developer.mozilla.org/en-US/docs/Web/CSS/position-area
Copyright (C) 2024 杜甫々
初版:2024年12月22日、最終更新:2024年12月22日
https://www.tohoho-web.com/css/prop/position-area.htm