1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. アットルール
  5. @position-try

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

@position-try

Baseline 2026
Newly available

Since January 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

@position-try は CSS のアットルールで、アンカー位置指定された要素の位置指定と配置を定義するために使用することができます、独自の位置指定試行フォールバックオプションを定義するために使用されます。アンカー要素には、position-try-fallbacks プロパティまたは position-try 一括指定を介して、1 つ以上の位置指定の代替オプションセットを適用できます。位置指定された要素が、その包含ブロックまたはビューポートからオーバーフローし始める位置に移動されると、ブラウザーは位置指定された要素を完全に画面内に収める最初の位置指定の代替オプションを選択します。

それぞれの位置オプションは <dashed-ident> で名付けられ、インセット位置、マージン、サイズ、自己配置などの情報を定義する宣言を指定する記述子リストを含みます。<dashed-ident> は、position-try-fallbacks プロパティおよび position-try 一括指定においてカスタム位置オプションを参照するために使用されます。

アンカー機能の詳細情報と位置試行代替機能の使用方法については、CSS アンカー位置指定モジュールおよびCSS アンカー位置指定の使用方法ガイドを参照してください。

構文

css
@position-try --try-option-name {
  descriptor-list
}

メモ: --try-option-name は、カスタム位置指定オプションの識別名を指定する <dashed-ident> です。これにより、その代替オプションを position-try-fallbacks リストに追加することができます。

記述子

記述子は、カスタム位置指定オプションの動作を定義するプロパティ値を指定します。つまり、位置指定要素が配置される場所を決定します。

position-anchor

position-anchor プロパティの値を指定し、位置指定要素が固定されるアンカー要素を定義します。これは、<dashed-ident> でアンカー要素の anchor-name プロパティの値と等しい値を指定することで行われます。

position-area

アンカー位置指定要素の位置をアンカーに対する相対位置で定義する position-area プロパティの値を指定します。

インセットプロパティ記述子

anchor() 関数の値を指定し、アンカー位置指定要素の端の位置を、アンカー要素の端に対する相対位置で定義します。インセットプロパティ記述子は、以下のプロパティを表すように設定できます。

マージンプロパティ記述子

アンカー位置指定された要素に設定されるマージンを指定します。マージンプロパティ記述子は、以下のプロパティを表すように設定できます。

サイズプロパティ記述子

anchor-size()関数の値を指定し、アンカー要素のサイズに対するアンカー位置指定要素のサイズを定義します。以下のプロパティを表すサイズ指定プロパティ記述子を設定できます。

自己配置プロパティ記述子

anchor-center 値を指定して、アンカー位置指定要素を、ブロック方向またはインライン方向において、アンカー要素の中心に対して配置します。align-self および justify-self 記述子は anchor-center 値を導くことができます。

メモ: カスタム位置オプションが要素に適用されると、@position-try アットルール記述子で定義されたプロパティ値は、標準的な CSS プロパティを介して要素に設定された値よりも優先されます。

形式文法

@position-try = 
  @position-try <dashed-ident> { <declaration-list> }
この構文は CSS Anchor Positioning Module Level 1 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

カスタム位置指定オプションの使い方

この例では、アンカー要素と位置指定要素を定義し、4 つの名前付きカスタム位置指定の試行代替オプションを生成します。これらのオプションは位置指定要素に適用され、アンカー要素がビューポート内のどこにあっても、そのコンテンツが常に確実に表示されるようにします。

HTML

ここでは 2 つの <div> 要素を設置し、これがアンカーとアンカー位置指定要素となります。

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

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

CSS

まず <body> 要素をとても大きくスタイル設定し、アンカー要素と位置指定要素をビューポート内で水平方向と垂直方向の両方にスクロール可能にします。

css
body {
  width: 1500px;
  height: 500px;
}

アンカーには anchor-name が指定され、position 値として absolute が設定されます。次に、top と left の値を使用して、初期の <body> レンダリングの中央付近に配置します。

css
.anchor {
  anchor-name: --my-anchor;
  position: absolute;
  top: 100px;
  left: 350px;
}

次に、@position-try アットルールを使用して、4つの独自の位置オプションを定義します。それぞれを識別し、その目的を記述するわかりやすい <dashed-ident> による名前を付けます。それぞれのオプションは、位置指定要素をアンカー要素の周囲の特定の位置に配置し、位置指定要素とそのアンカー要素の間に適切な 10px のマージンを設定します。位置指定方法は様々な手法で処理され、利用できる異なるテクニックを示すためです。

  • 最初と最後の位置オプションは position-area を使用しています。
  • 2 番目の位置オプションは top で anchor() 値を使用し、 justify-self: anchor-center を用いて、位置指定要素をアンカーに対してインライン方向に中央揃えします。
  • 3 番目の位置オプションでは、left に anchor() 値を使用し、それを calc() 関数で囲んで 10px の空間を追加しています（他のオプションのように margin で間隔を作成するのではなく）。その後、align-self: anchor-center を使用して、位置指定要素をブロック方向においてアンカーに対して中央揃えにします。

最後に、左右の位置指定オプションの場合は、width をより狭く指定します。

css
@position-try --custom-left {
  position-area: left;
  width: 100px;
  margin-right: 10px;
}

@position-try --custom-bottom {
  top: anchor(bottom);
  justify-self: anchor-center;
  margin-top: 10px;
  position-area: none;
}

@position-try --custom-right {
  left: calc(anchor(right) + 10px);
  align-self: anchor-center;
  width: 100px;
  position-area: none;
}

@position-try --custom-bottom-right {
  position-area: bottom right;
  margin: 10px 0 0 10px;
}

情報ボックスには固定位置指定が指定され、position-anchor でアンカー名の anchor-name を参照して両者を関連付け、さらに position-area を用いてアンカーの上端に固定します。同時に固定幅の width といくらかの下方向のマージン margin を設定します。カスタム位置指定オプションは position-try-fallbacks プロパティで参照され、アンカーがビューポートの端に近づいた際に位置指定要素があふれたりスクロールで表示範囲外になったりするのを防ぎます。

css
.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top;
  width: 200px;
  margin-bottom: 10px;
  position-try-fallbacks:
    --custom-left, --custom-bottom, --custom-right, --custom-bottom-right;
}

結果

ページをスクロールすると、アンカーがビューポートの異なる端に近づくにつれて、位置指定要素の配置が変化することに気づくでしょう。これは、異なる代替配置オプションが適用されるためです。

これらのポジションオプションがどのように機能するか、詳しく説明しましょう。

  • まず、デフォルトの位置は position-area: top で定義されていることに注意してください。情報ボックスがどの方向にもページからはみ出していない場合、情報ボックスはアンカーの上に配置され、position-try-fallbacks プロパティで設定された位置の代替オプションは無視されます。また、情報ボックスには固定幅と下マージンが設定されている点にも注意してください。これらの値は、異なる位置の代替オプションが適用されるにつれて変化します。
  • 情報ボックスがオーバーフローを始めた場合、ブラウザーはまず --custom-left の位置を試行します。これにより position-area: left を使用して情報ボックスをアンカーの左側に移動し、マージンを調整すると同時に、情報ボックスの幅も変更します。
  • 次に、ブラウザーは --custom-bottom 位置を試行します。これは position-area ではなく top と justify-self を使用して情報ボックスをアンカーの下部に移動し、適切なマージンを設定します。width 記述子を記載していないため、情報ボックスは width プロパティで設定されたデフォルト幅 200px に戻ります。
  • ブラウザーは次に --custom-right 位置を試行します。これは --custom-left 位置とほぼ同様に動作し、同じ width 記述子値が適用されます。ただし、position-area ではなく left と align-self を使用して位置指定要素を配置します。また、left 値を calc() 関数でラップし、その内部で 10px を加算して空間を生成しています。これは margin を使用する代わりに実施しています。
  • 他の試行代替オプションのいずれも、位置指定要素のオーバーフローを停止させることに成功しない場合、ブラウザーは最終手段として --custom-bottom-right 位置を試行します。これは position-area: bottom right を使用して、位置指定要素をアンカーの右下に配置します。

位置オプションが適用されると、その値は位置指定要素に設定された初期値を上書きします。例えば、位置指定要素に初期設定された width は 200px ですが、--custom-right 位置オプションが適用されると、その幅は 100px に設定されます。

場合によっては、初期値を無効化するために独自の位置オプション内で値を設定する必要がある場合があります。--custom-bottom および --custom-right オプションは、位置指定要素を配置するために inset プロパティと *-self: anchor-center 値を使用します。そのため、それぞれの場合で position-area: none を設定することで、前回設定された position-area 値を除去します。これを実行しなかった場合、初期設定の position-area: top 値が引き続き有効となり、他の位置指定情報と干渉します。

仕様書

Specification
CSS Anchor Positioning Module Level 1
# at-ruledef-position-try

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content