position-try

構成要素のプロパティ

このプロパティは次の CSS プロパティの一括指定です。

• position-try-order
• position-try-fallbacks

構文

/* position-try-fallbacks のみ */
position-try: normal flip-block;
position-try: top;
position-try: --custom-try-option;
position-try: flip-block flip-inline;
position-try: top, right, bottom;
position-try: --custom-try-option1, --custom-try-option2;
position-try:
  normal flip-block,
  right,
  --custom-try-option;

/* position-try-order および position-try-fallbacks */
position-try: normal none;
position-try:
  most-width --custom-try-option1,
  --custom-try-option2;
position-try:
  most-height flip-block,
  right,
  --custom-try-option;

/* グローバル値 */
position-try: inherit;
position-try: initial;
position-try: revert;
position-try: revert-layer;
position-try: unset;

値

値の説明は position-try-order と position-try-fallbacks を参照してください。

position-try 一括指定は position-try-fallbacks の値、または position-try-order および position-try-fallbacks の値をその順序で指定することができます。position-try-order が省略された場合、プロパティの初期値、すなわち normal が設定されますので、位置指定試行代替オプションはプロパティに現れる順に試行されます。

公式定義

形式文法

position-try = 
  <'position-try-order'>? <'position-try-fallbacks'>  

<position-try-order> = 
  normal      |
  <try-size>  

<position-try-fallbacks> = 
  none                                                |
  [ [ <dashed-ident> || <try-tactic> ] | <position-area> ]#  

<try-size> = 
  most-width        |
  most-height       |
  most-block-size   |
  most-inline-size  

<try-tactic> = 
  flip-block   ||
  flip-inline  ||
  flip-start   ||
  flip-x       ||
  flip-y       

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | self-x-start | self-x-end | span-self-x-start | span-self-x-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | self-y-start | self-y-end | span-self-y-start | span-self-y-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}  

例

基本的な position-try の使い方

個のデモは、 position-try の効果を示します。

HTML

この HTML には、アンカーと位置指定要素となる 2 つの <div> 要素があります。

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>これは情報ボックスです。</p>
</div>

CSS

このCSSでは、アンカーに anchor-name を指定し、position の値として absolute を設定しています。top と left の値を使用して、ビューポートの上半分に配置します。

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

.anchor {
  anchor-name: --my-anchor;
  position: absolute;
  top: 100px;
  left: 45%;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
}

form {
  position: fixed;
  bottom: 2px;
  right: 2px;
}

次に、カスタム位置オプション --custom-bottom を指定します。これにより要素はアンカーの下に配置され、適切なマージンが適用されます。

@position-try --custom-bottom {
  top: anchor(bottom);
  bottom: unset;
  margin-top: 10px;
}

最初に要素をアンカー要素の上に配置し、次に position-try 値を設定します。これにより position-try-order が most-height となり、position-try-fallbacks リストにはカスタム代替プションのみが含まれます。

.infobox {
  position: fixed;
  position-anchor: --my-anchor;

  bottom: anchor(top);
  margin-bottom: 10px;
  justify-self: anchor-center;

  position-try: most-height --custom-bottom;
}

結果

要素はアンカー要素の下に表示されます。これは、要素が最初にアンカー要素の上に配置されているにもかかわらず発生します。この現象は、アンカー要素の下に上よりももっと縦の空間が存在するためです。most-height の優先順序により、--custom-bottom の代替オプションが適用され、位置指定要素は包含ブロックに最大の高さを与える位置に配置されます。

仕様書

ブラウザーの互換性

関連情報

• position-area
• position-try-fallbacks
• position-try-order
• @position-try アットルール
• <position-area> 値
• CSS アンカー位置指定モジュール
• CSS アンカー位置指定の使用ガイド
• オーバーフロー時の代替オプションと条件付き非表示ガイド