CSS - position-try-order
概要
属性名 | position-try-order |
---|---|
値 | normal | most-width | most-height | most-block-size | most-inline-size |
初期値 | normal |
適用可能要素 | 配置ボックス |
継承 | 継承しない |
サポート | https://caniuse.com/mdn-css_properties_position-try-order |
説明
アンカーポジショニングにおいて配置ボックスが領域からはみ出す場合、position-try-fallbacks
で補正位置を指定しますが、その優先度を指定します。
- normal
- 優先度を指定しません。
position-try-fallbacks
に記述された順番で評価します。 - most-width
- 横幅を最大限確保できる位置を優先します。
- most-height
- 高さを最大限確保できる位置を優先します。
- most-block-size
- ブロックサイズ方向(横書きの場合は縦方向)に最大限確保できる位置を優先します。
- most-inline-size
- インラインサイズ方向(横書きの場合は横方向)に最大限確保できる位置を優先します。
アンカーポジショニングの詳細は「とほほのアンカーポジショニング入門」を参照してください。
使用例
CSS
.my-positioned-box { position-area: bottom span-right; position-try-fallbacks: bottom span-left, top span-right, top span-left; position-try-order: most-width; }
リンク
- https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property
- https://developer.mozilla.org/en-US/docs/Web/CSS/position-try-order
Copyright (C) 2024 杜甫々
初版:2024年12月22日、最終更新:2024年12月22日
https://www.tohoho-web.com/css/prop/position-try-order.htm