CSS - position-try-fallbacks

概要

属性名 position-try-fallbacks
値 none | [ [ <dashed-ident> || <try-tactic> ] | <position-area> ]#
値の詳細<try-tactic> = flip-block | flip-inline | flip-start
<position-area> = position-area 参照
初期値none
適用可能要素配置ボックス
継承継承しない
サポートhttps://caniuse.com/mdn-css_properties_position-try-fallbacks

説明

アンカーポジショニングにおいてポジション要素が画面からはみ出す場合に、はみ出さないように移動させる移動先を指定します。位置情報はカンマ(,)で区切って複数指定することができ、前から順番にはみ出しが無くなるまで評価されます。詳細は「とほほのアンカーポジショニング入門」を参照してください。

none
移動先を指定しません。
<dashed-ident>
@position-try で定義した名前を指定します。
flip-block
ブロック方向(横書きの場合は縦方向)に反転させます。
flip-inline
インライン方向(横書きの場合は横方向)に反転させます。
flip-start
開始方向に反転させます。アンカーの左上から右下の対角線にそって反転させます。ポジション要素の縦横の大きさも変わるようです。
<position-area>
position-area プロパティと同様の位置情報を指定します。

使用例

CSS
.my-positioned-box {
  position-area: bottom span-right;
  position-try-fallbacks: bottom span-left, top span-right, top span-left;
}

リンク

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