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

リンク

初版：2024年12月22日、最終更新：2024年12月22日

https://www.tohoho-web.com/css/prop/position-try-order.htm