CSS - @position-try

• トップ
• CSSリファレンス
• @position-try

概要

説明

アンカーポジショニングにおいて position-try-fallbacks に指定する配置ボックスの位置補正名を定義します。アンカーポジショニングに関する詳細は 「とほほのアンカーポジショニング入門」 を参照してください。

<dashed-ident>

position-try-fallbacks に指定する位置補正名を記述します。-- ではじまる必要があります。

@position-try { ... } の中では下記のプロパティを定義することができます。

• inset-block-start, inset-block-end, inset-inline-start, inset-inline-end
• margin-top, margin-right, margin-bottom, margin-left
• width, height
• justify-self, align-self, place-self
• position-anchor, position-area

使用例

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

リンク

• https://drafts.csswg.org/css-anchor-position-1/#fallback-rule