CSSアンカーポジショニング

1. はじめに

CSSの絶対位置指定は、 著者がボックスをページ上のどこにでも配置できるようにします。 これは、他のボックスのレイアウト（包含ブロック以外）を考慮しません。 この柔軟性は非常に便利ですが、 制限もあり、しばしば何らかの他のボックスを基準に配置したい場合があります。 アンカーポジショニング （position-anchorプロパティ、 position-areaプロパティ、 または アンカー関数 anchor() や anchor-size() を用いることで） 著者はこの目的を達成できます。 絶対位置指定されたボックスを ページ上の1つ以上の他のボックス（アンカー参照）に「アンカー」し、 重なりやオーバーフローを避けるために複数の配置位置を試すことも可能です。

.anchor {
  anchor-name: --tooltip;
}
.tooltip {
  /* Fixposにより、包含ブロックの関係を気にする必要がありません。
     ツールチップはDOMのどこにでも存在できます。 */
  position: fixed;

  /* すべてのアンカー動作はデフォルトで--tooltipアンカーを参照します。 */
  position-anchor: --tooltip;

  /* ツールチップの下端をアンカーの上端に揃えます。
     水平方向書字モードでは、ツールチップとアンカーの水平方向中央揃えもデフォルトです。 */
  position-area: block-start;

  /* ウィンドウからはみ出した場合、自動的に切り替わり、
     ツールチップの上端がアンカーの下端に揃います。 */
  position-try: flip-block;

  /* 幅が広くなりすぎないようにする */
  max-inline-size: 20em;
}

.tooltip {
  /* popover + popovertarget属性を使うと 'position: fixed'が設定され、
     必要なposition-anchor関係も作成されます。 */
  position-area: block-start;
  position-try: flip-block;
  max-inline-size: 20em;
}

1.1. 値の定義

この仕様は、[CSS2]のCSSプロパティ定義規約に従い、 [CSS-VALUES-3]の値定義構文を使用します。 この仕様で定義されていない値型は、CSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールと組み合わせることで、これらの値型定義が拡張される場合もあります。

各プロパティの定義に記載された値に加え、 この仕様で定義されたすべてのプロパティは CSS全体キーワードもプロパティ値として受け付けます。 可読性のため、明示的に繰り返して記載していません。

CSSのセレクタマッチング以外の大半の処理と同様に、 この仕様の機能は フラット化された要素ツリー上で動作します。

2. アンカーの決定

2.1. アンカーの作成：anchor-nameプロパティ

anchor-nameプロパティは、 要素がアンカー要素であることを宣言します。 その主ボックスがアンカーボックスとなり、 ターゲットとなるアンカー名のリストを指定します。 値は次のように定義されます：

none

このプロパティは効果を持ちません。

<dashed-ident>#

要素が主ボックスを生成する場合、 その要素はアンカー要素となり、 指定されたアンカー名リストを持ちます。 各アンカー名はゆるやかに一致する ツリースコープ名です。

それ以外の場合、このプロパティは効果を持ちません。

アンカー名は一意である必要はありません。 すべての要素が、あるボックスのターゲットアンカー要素になれるわけではありません。 したがって、スコープを適切に設定すれば、同じ名前を複数箇所で再利用できます。

注: 複数の要素が同じアンカー名を共有し、 すべてが特定の配置ボックスから見える場合、 ターゲットアンカー要素はDOM順で最後のものになります。 anchor-scopeプロパティで、 参照ボックスから見える名前をさらに制限することもできます。

アンカー名はデフォルトでは containmentによってスコープされません。 要素がスタイルや レイアウトcontainment （または類似のcontainment）を持っていても、 子孫のアンカー名はページ内の他の要素から参照可能です。

注: 要素が他の要素の スキップされた内容 （例: content-visibility: hidden）にある場合、 有効なアンカー要素とはみなされず、 実質的に名前を持たないものとして扱われます。

注: シャドウツリー内の配置要素は、 「上位」ツリーで定義されたアンカー名を参照できます。 現状では「下位」シャドウツリーで定義されたアンカー名は参照できません。

2.1.1. 暗黙的アンカー要素

一部の仕様では、特定の状況下で ある要素が他の要素に対して 暗黙的アンカー要素 となることを定義できます。

TODO: 新しいポップオーバー関連仕様がHTML仕様に追加されたタイミングで、例を記載予定

暗黙的アンカー要素は autoキーワードを position-anchorで使ったり、 アンカー関数でアンカー参照を省略することで参照できます。

暗黙的アンカー要素は 疑似要素の場合、 その発生源要素となります（別途指定がない限り）。

2.1.2. アンカーボックス

この仕様のいくつかの機能は、アンカーボックスの位置とサイズを参照します。 別途指定がない限り、 これはborder box境界、 主ボックスの アンカー要素について指します。 アンカーボックスの位置とサイズはレイアウト後に決定されます。

この位置とサイズには、zoomや positionによる調整 （position: relativeや position: stickyなど）、 さらにtransformや offset-pathによる変形も含まれます。 この場合、アンカーボックスの座標空間での軸揃えバウンディング矩形が 絶対位置指定要素の 包含ブロックで使われます。 変形はしばしば別スレッドで最適化されるため、 アンカーボックスの位置の変形による更新は数フレーム遅れる場合があります。 著者は、可能な場合は絶対または相対位置指定を使うことでこの遅延を回避できます。

アンカーボックスが 分割されていて、 包含ブロックが 絶対位置指定ボックスの アンカーボックス参照で関連する 分割コンテキストの外にある場合、 ボックス分割の 軸揃えバウンディング矩形が使われます。 （絶対位置指定ボックスが 分割コンテキスト内にある場合、 アンカーボックスは分割されていないものとして扱われ、 分割コンテキストによって自分自身も分割される可能性があります。）

パフォーマンス上の理由から、 スクロールは特別に扱われます（詳しくは § 3.3 スクロールの考慮 を参照）。 その他のレイアウト後の効果（フィルターなど）は、 アンカーボックスの位置に影響しません。

2.2. アンカー名のスコープ指定：anchor-scopeプロパティ

このプロパティは、指定されたアンカー名およびそれらのアンカー名への参照を、 この要素のサブツリー内にスコープします。 詳しくは§2 アンカーの決定を参照してください。

値の意味は以下の通りです：

none

アンカー名のスコープは変更されません。

all

この要素または子孫によって定義されたすべてのアンカー名 （子孫がanchor-scopeで既にスコープを制限していない場合のみ）が、 この要素の子孫のみで参照可能になるようスコープします。 また、子孫はこのサブツリー内のアンカー要素のみ アンカー名に一致できるよう制限されます。

この値は同じツリースコープ内のアンカー名だけに影響し、 厳密一致のツリースコープ名と同じように動作します。 （つまり、anchor-scope: allは anchor-scope: --foo, --bar, ...として すべての関連するアンカー名を列挙するのと同じ挙動になります。）

<dashed-ident>

この要素または子孫によって定義された一致するアンカー名 （子孫がanchor-scopeで既にスコープを制限していない場合のみ）が、 この要素の子孫のみで参照可能になるようスコープします。 また、子孫はこのサブツリー内のアンカー要素のみ アンカー名に一致できるよう制限されます。

<dashed-ident>は 厳密一致のツリースコープ名を表します。 つまり、同じシャドウツリー内のアンカー名のみ一致可能です。[CSS-SCOPING-1]

このプロパティは暗黙的アンカー要素には影響しません。

li {
  anchor-name: --list-item;
  anchor-scope: --list-item;
}
li .positioned {
  position: absolute;
  position-anchor: --list-item;
  position-area: inline-start;
}

2.3. アンカーの検索

この仕様のいくつかの機能は、アンカー指定子 を元に、ターゲットアンカー要素を検索します。 アンカー指定子は、<dashed-ident> （ツリースコープ参照）であり、 ページ上の他のanchor-name値を一致させるもの、 またはキーワードauto、 あるいは空（指定なし）となります。

注: これらの条件で示される一般的なルールは、 要素が配置ボックスのターゲットアンカー要素になれるのは、 そのボックス自体が、参照しようとする配置ボックスよりも先に完全にレイアウトされている場合のみです。 CSSのレイアウト規則は、アンカーと配置ボックス、およびそれぞれの包含ブロックの関係によって 有用な保証をもたらします。 下記の条件リストは、スタッキングコンテキスト規則を この目的に関連する内容だけに言い換えたもので、 アンカーポジショニングで循環が起きないことを保証します。

2.4. デフォルトアンカー：position-anchorプロパティ

position-anchorプロパティは、デフォルトアンカー要素を指定します。 この要素はposition-area、position-try、 および（デフォルトで）この要素に適用されるすべてのアンカー関数で使用されます。 position-anchorはリセット専用サブプロパティであり、 positionの一部です。

auto

暗黙的アンカー要素が存在する場合はそれを使い、存在しない場合はボックスにデフォルトアンカー要素がありません。

<anchor-name>

指定されたターゲットアンカー要素が選択され、 そのボックスがデフォルトアンカー要素となります。

主ボックスがデフォルトアンカー要素の ボックスのデフォルトアンカーボックスとなります。

.anchored {
  position: absolute;
  top: calc(.5em + anchor(outside));
  /* アンカー名を指定しない場合、
     デフォルトアンカーボックスを自動的に参照します。 */
}

.foo.anchored {
  position-anchor: --foo;
}
.bar.anchored {
  position-anchor: --bar;
}

2.5. アンカーの関連性

要素elがユーザーに関連するかどうかを判定する際、 elの子孫が配置ボックスのターゲットアンカー要素であり （その配置ボックス自身がスキップされておらず、 その包含ブロックがelやその子孫でない場合）、 elはユーザーに関連するとみなされます。

注: 例えば、 content-visibility: autoサブツリー内のアンカーは それを頼りにする配置ボックスがスキップされていなければ サブツリーの内容がスキップされるのを防ぎます。 （アンカーと配置ボックスが同じcontent-visibility: auto要素の下に両方いる場合は、 循環的に相互を可視化し続けることはできません。）

3. アンカー基準の配置

絶対位置指定ボックスは、 ページ上の1つ以上のアンカーボックスを基準に自分自身を配置できます。

position-areaプロパティは、 デフォルトアンカーボックスを基準とした グリッドベースの配置を簡便に提供します。 より複雑な配置や複数ボックスを基準とする場合は、 anchor()関数を インセットプロパティ で使い、特定のアンカーボックスの辺を明示的に参照できます。

3.1. position-areaプロパティ

アンカーポジショニングの一般的なユースケースは、 配置ボックスの包含ブロックの端や デフォルトアンカーボックスの端のみを気にするものです。 これらの線は3×3のグリッドを定義するものとして考えられます。 position-areaを使うことで、 このposition-areaグリッドのどの領域に配置するかを簡単に指定できます。

none

このプロパティは効果を持ちません。

<position-area>

ボックスにデフォルトアンカーボックスがない場合や、 絶対位置指定ボックスでない場合は効果を持ちません。

それ以外の場合、position-areaグリッドの領域を選択し、 それをボックスの包含ブロックとします。

注: これは、インセットプロパティがposition-areaからのオフセットを指定することや、 max-height: 100%などの値が position-areaに対する相対値になることを意味します。

none以外の値は追加で以下の効果を持ちます：

• スクロール可能な包含ブロックが、必要に応じて ローカル包含ブロックの代わりに使われ、 スクロール可能なオーバーフロー領域全体（通常）が 配置に利用可能になります。

• autoのインセットプロパティは0として解決されます。

• normal値のセルフアラインメントプロパティは 対応する値に解決されます。詳細は§ 4.1 エリア固有のデフォルト整列を参照。

3.1.1. ポジションエリアグリッドの解決

ポジションエリアグリッドは、各軸に4本のグリッド線からなる3×3のグリッドです。 （包含ブロックの書字モードを用いる順序で）：

• ボックスの修正前の包含ブロックのstart端、またはそれよりもさらにstart側にある場合はデフォルトアンカーボックスのstart端

• デフォルトアンカーボックスのstart端

• デフォルトアンカーボックスのend端

• ボックスの修正前の包含ブロックのend端、またはそれよりもさらにend側にある場合はデフォルトアンカーボックスのend端

注: デフォルトアンカーボックスが 修正前の包含ブロックの外側に部分的または完全に存在する場合、 ポジションエリアグリッドの行や列がサイズ0になることがあります。

3.1.2. <position-area>値の構文

位置は値のペアとして指定されます。 これはフロー相対または物理用語で表現できます。 <position-area>値の許容構文は次の通りです：

<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-area>値は、以下のように領域が占める行と列を指定することでポジションエリアグリッドの領域を選択します：

start, end, self-start, self-end

top, bottom, left, right

y-start, y-end, self-y-start, self-y-end

x-start, x-end, self-x-start, self-x-end

block-start, block-end, self-block-start, self-block-end

inline-start, inline-end, self-inline-start, self-inline-end

center

指定した軸における対応する単一の行または列。

anchor()と同様に、 論理キーワード（start、endなど）は ボックスの包含ブロックの書字モードを基準とします。 x-startなどは 指定された物理軸に従って方向を決定します。

self-*論理キーワード（self-startやself-x-endなど）は同じですが、 ボックス自身の書字モードを基準にします。

span-start, span-end, span-self-start, span-self-end

span-top, span-bottom, span-left, span-right

span-y-start, span-y-end, span-self-y-start, span-self-y-end

span-x-start, span-x-end, span-self-x-start, span-self-x-end

span-block-start, span-block-end, span-self-block-start, span-self-block-end

span-inline-start, span-inline-end, span-self-inline-start, span-self-inline-end

指定した軸における隣接する2つの行または列：中央の行/列と、単一トラックキーワードで示されるもう一方の行/列。

（例：span-topは最初の2行（中央行＋top行）を含みます。）

span-all

指定した軸における3つすべての行または列。

いくつかのキーワードはどの軸を指すか曖昧です： center、 span-all、 また、block軸やinline軸を明示しないstartなどのキーワード。 もう一方のキーワードが軸に関して明確であれば、 曖昧な方は反対軸を指します。 （例：block-start centerの場合、centerはinline軸を指します。） 両方とも曖昧な場合は、最初がボックスのblock軸、 2番目がinline軸を指します。 （例：span-all startはspan-all inline-startと同義です。）

キーワードが1つだけの場合、軸が明確なら2番目はspan-allとして扱い、 軸が不明瞭なら指定キーワードを繰り返したものとして扱います。 （例：topはtop span-allと同義、 centerはcenter centerと同義。）

3.1.3. <position-area>の算出値とシリアライズ

算出値は、<position-area>値として 各軸で選択されたトラックを示す2つのキーワードです。 長い（block-start）・短い（start）論理キーワードは同義とみなします。 シリアライズ時は上記文法の順序で、論理キーワードは短縮形（例：start start、block-start inline-startではなく）で出力されます。

3.2. アンカー相対インセット：anchor()関数

絶対位置指定ボックスは、 anchor()関数を、 インセットプロパティの値として利用し、 1つ以上のアンカーボックスの位置を参照できます。 anchor()関数は <length>に解決されます。 この関数はインセットプロパティのみで使用可能（それ以外では無効）です。

<anchor()> = anchor( <anchor-name>? && <anchor-side>, <length-percentage>? )
<anchor-name> = <dashed-ident>
<anchor-side> = inside | outside
       | top | left | right | bottom
       | start | end | self-start | self-end
       | <percentage> | center

anchor()関数は3つの引数があります：

• <anchor-name>値は、 どのアンカー要素から位置情報を取得するかを決定します。 値は以下の通りです：

  <dashed-ident>

  探すアンカー名を指定します。 この名前はツリースコープ参照です。

  省略時

  可能な場合は、ボックスに定義されたデフォルトアンカー要素を選択します。

  詳細はターゲットアンカー要素を参照してください。

• <anchor-side>値は、 ターゲットアンカー要素の対応する辺の位置を参照します。 可能な値は以下の通りです：

  inside

  outside

  アンカーボックスの辺のいずれかに解決され、 どのインセットプロパティで使われているかによります。 insideは インセットプロパティと同じ辺（アンカーボックスの「内側」に配置）を指し、 outsideは反対側を指します。

  top

  right

  bottom

  left

  指定されたアンカーボックスの辺を参照します。

  注: これらは、 対応する軸のインセットプロパティでのみ使用できます。 例えば、leftは left、right または水平方向のインセットプロパティで使えます。

  start

  end

  self-start

  self-end

  アンカーボックスの、 使用しているインセットプロパティと同じ軸の辺を参照します。 キーワードは、配置ボックス（self-start/self-end）または 配置ボックスの包含ブロック（start/end）の書字モードに基づいて解決されます。

  <percentage>

  center

  指定されたパーセンテージの位置（startと endの間）を参照します。 0%はstartに、 100%はendに相当します。

  centerは50%と同じです。

• 最後の引数（省略可能）<length-percentage>はフォールバック値であり、 解決不可能なアンカー関数の場合に計算される値を指定します。

anchor()関数が 解決可能なアンカー関数の場合、 算出値の時点（スタイル・レイアウトインターリーブを利用）で、 配置ボックスのinset-modified包含ブロックの対応する辺と 指定されたターゲットアンカー要素の アンカーボックスの辺を揃える<length>に解決されます。

注: これはトランジションや アニメーションでアンカー関数を使っている場合、 あらゆる変化に対して「期待通り」に動作することを意味します。 例えばアンカーボックスの移動や、 アンカー要素のドキュメントからの追加・削除、 anchor-nameプロパティの変更などです。

.centered-message {
  position: fixed;
  max-width: max-content;
  justify-self: center;

  --center: anchor(--x 50%);
  --half-distance: min(
    abs(0% - var(--center)),
    abs(100% - var(--center))
  );
  left: calc(var(--center) - var(--half-distance));
  right: calc(var(--center) - var(--half-distance));
  bottom: anchor(--x top);
}

3.2.1. anchor()の解決

anchor()関数は、 以下すべての条件を満たす場合のみ 解決可能なアンカー関数となります。

• 絶対位置指定ボックス（absolutely positioned box）に適用されている。

• 関数内の<anchor-side>が物理キーワードの場合、 その軸で適用できるインセットプロパティで指定されていること。 （例：leftは left、right、 または水平方向の論理インセットプロパティのみで使用可能。)

• 関数が使用されるボックスと、指定された<anchor-name>値に対して ターゲットアンカー要素が存在すること。

これらの条件のいずれかが偽の場合、 anchor()関数は 指定されたフォールバック値で算出されます。 フォールバック値が指定されていない場合、 それを参照する宣言は算出値時点で無効となります。

3.3. スクロールの考慮

パフォーマンス上の理由から、 実装は通常、スクロール処理を別のスクロール／「合成」スレッドで行います。 このスレッドは能力が非常に限られており （単純な移動や変形などは可能ですが、レイアウトなど高コストな処理は不可）、 そのためスクロールへの応答は人間の知覚上「瞬時」となるほど高速です。

スクロールによってアンカーポジション要素が単に移動するだけなら、 理論的には問題ありません。 移動はスクロールスレッドで実行できるので、 配置要素はスクロールコンテンツとともに滑らかに動きます。 しかし、アンカーポジショニングは 要素が自分自身の反対側の辺の位置を 異なるスクロールコンテキストの要素に依存させることができます。 これにより、スクロールで一方の辺だけが動いてサイズが変わり、 レイアウトが発生する可能性があります。 これはスクロールスレッドでは処理できません！

この問題を補うため、 かつ可能な限り多様なアンカーへの自由な参照を可能にするために、 アンカーポジショニングは 記憶されたスクロールオフセットと スクロール補正の組み合わせを利用します。

上記により、配置要素はアンカー参照のスクロール位置に一度だけ応答できますが、 いずれかがスクロールされると配置要素はもはやその要素にアンカーされているようには見えません （非スクロールの移動には引き続き応答します）。 この問題は一般的には解決できませんが、 1つのアンカー参照のスクロールには応答できます。 具体的には、デフォルトアンカー要素です：

4. アンカー基準の整列

4.1. エリア固有のデフォルト整列

position-areaがnoneでない場合、 normalなセルフアラインメント値の挙動は <position-area>値に応じて変化し、 ボックスはアンカー側へ整列されます：

• ある軸で中央トラックのみが選択されている場合、 その軸のデフォルト整列はcenterです。

• 3つ全てのトラックが選択されている場合、 その軸のデフォルト整列はanchor-centerです。

• それ以外の場合、その軸のデフォルト整列は未指定側のトラックに向かいます。 例えば「start」トラックを指定している場合、 その軸のデフォルト整列はendなどになります。

ただし、関連軸のインセットプロパティinset propertyが1つだけautoの場合、 デフォルト整列は非autoインセットの辺に向かい、 これはunsafeな整列です。

注: この単一auto挙動は、 1つだけ指定されたインセットが絶対位置ボックスの位置を制御する従来の方法を維持します。

4.2. アンカー中央揃え：anchor-center整列値

セルフアラインメントプロパティは、 絶対位置指定ボックスが inset-modified包含ブロック内で自身を整列することを可能にします。 既存値と適切なインセットプロパティの組み合わせで 多くの整列が実現できますが、 アンカー基準配置の典型例である「アンカー中央揃え」は複雑な設定が必要でした。

新しいanchor-center値により、 このケースが非常に簡単になります。 配置ボックスがデフォルトアンカーボックスを持つ場合、 可能な限りその上で中央揃えされます。

さらに、 autoなインセットプロパティは 0に解決されます。

ボックスが絶対位置指定でない、またはデフォルトアンカーボックスを持たない場合は、 この値はcenterと同じ挙動となり、 インセットプロパティの解決に追加効果はありません。

注: anchor-center使用時、 アンカーがボックスの元の包含ブロック端付近にある場合は、 完全な中央揃えから「シフト」し、 元の包含ブロック内に収めます。 詳細はCSS Box Alignment 3 § 4.4 オーバーフロー整列：safe/unsafeキーワードとスクロール安全制限を参照。

4.3. 条件付き中央揃え：dialog整列値

ダイアログボックスは多くの場合、画面中央に表示されますが、 他の要素にアンカーされている場合はその限りではありません。

新しいdialog値により、 この挙動を指定できます。 ボックスが絶対位置指定で position-area値がnoneでない場合、 normalとして整列されます （§ 4.1 エリア固有のデフォルト整列参照）。 それ以外はcenterとして整列されます。

5. アンカー基準のサイズ指定

絶対位置指定ボックスは、 anchor-size()関数を サイズ指定プロパティで利用し、 1つ以上のアンカーボックスのサイズを参照できます。 anchor-size()関数は <length>に解決されます。 この関数は許可された@position-tryプロパティでのみ使用可能（それ以外では無効）です。

5.1. anchor-size()関数

anchor-size() = anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-size> = width | height | block | inline | self-block | self-inline

anchor-size()関数はanchor()関数に似ていて 同じ引数を取りますが、<anchor-side>キーワードの代わりに<anchor-size>を使い、 対向する2辺の距離を参照します。

物理<anchor-size>キーワード (width およびheight) はそれぞれターゲットアンカー要素の 幅・高さを指します。 anchor()とは異なり、軸一致の制約はありません。 例えばwidth: anchor-size(--foo height);も有効です。

論理<anchor-size>キーワード (block, inline, self-block, self-inline) は、物理キーワードのどれに対応するか ボックス自身の書字モード （self-block/self-inline）または ボックスの包含ブロックの 書字モード（block/inline）により決定されます。

<anchor-size>キーワードを省略した場合、 使用しているプロパティの軸に合うキーワードとして動作します （例：width: anchor-size()はwidth: anchor-size(width)と同じ意味）。

anchor-size()関数が 解決可能なanchor-size関数の場合、 算出値の時点（スタイル・レイアウトインターリーブ利用）で、 <length>、 つまり該当軸の両端（左右または上下）の距離で ターゲットアンカー要素の アンカーボックスの辺を分離します。

5.1.1. anchor-size()の解決

anchor-size()関数は、 以下すべての条件を満たす場合のみ 解決可能なanchor-size関数となります。

• 絶対位置指定ボックス（absolutely positioned box）に適用されている。

• 関数が使用されるボックスと、指定された<anchor-name>値に対して ターゲットアンカー要素が存在すること。

これらの条件のいずれかが偽の場合、 anchor-size()関数は指定されたフォールバック値に解決されます。 フォールバック値が指定されていない場合、 それを参照する宣言は算出値時点で無効となります。

6. オーバーフロー管理

アンカーポジショニングは強力ですが、 予測不可能な場合もあります。 アンカーボックスはページ上のどこにでもあり得るため、 （例えばアンカーの上側や右側など）特定の方法でボックスを配置しようとすると、 配置ボックスが包含ブロックからはみ出したり、 画面の一部が見切れてしまうことがあります。

これを緩和するため、絶対位置指定ボックスは position-try-fallbacksプロパティを使って、 複数の配置・整列プロパティのバリアントセット （既存のスタイルから生成するか、 @position-tryルールで指定）を参照できます。 UAは、初期位置でボックスがはみ出した場合にこれらを順に適用し、 包含ブロックからはみ出さない最初のものを採用します。

position-try-orderは、 これらの選択肢を定義される空間の広さでソートすることもでき、 ボックスができるだけ広いスペースを持つことが重要な場合に 宣言順よりも優先できます。

6.1. フォールバック指定：position-try-fallbacksプロパティ

このプロパティは、絶対位置指定ボックスが inset-modified包含ブロックからはみ出したときに 試行する代替配置スタイルのリストを提供します。 この位置オプションリストは 初期状態では空です。

リスト内の各カンマ区切りエントリが個別のオプションです： @position-tryブロックの名前か、 ボックスの既存算出スタイルを自動変形する <try-tactic>です。

値の意味は以下の通りです：

none

このプロパティは効果を持ちません。 ボックスの位置オプションリストは空です。

<dashed-ident>

指定名の@position-tryルールがあれば、 その関連する位置オプションが 位置オプションリストに追加されます。

なければ、この値は効果を持ちません。

<try-tactic>

指定キーワードに従いtry-tacticによる値入れ替えを行い、 ボックスの算出スタイルから自動で位置オプションを作成し、 位置オプションリストに追加します。

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

flip-block

block軸の値（例：margin-block-startとmargin-block-endなど）を入れ替え、 本質的にinline軸上で鏡像化します。

flip-inline

inline軸の値を入れ替え、 本質的にblock軸上で鏡像化します。

flip-start

startプロパティ同士、 及びendプロパティ同士 （例：margin-block-startとmargin-inline-startなど）を入れ替え、 start-startコーナーから end-endコーナーへの対角線上で鏡像化します。

複数キーワードが指定された場合、 変形を順に合成して1つの位置オプションを作成します。

<dashed-ident> || <try-tactic>

前2つの効果を組み合わせます。 指定名の@position-tryルールがあれば、 その位置オプションを ベーススタイルに適用した上で、 指定<try-tactic>で変形し、 結果を位置オプションリストに追加します。

なければ何もしません。

<position-area>

指定値のposition-areaプロパティのみで構成される 位置オプションを自動生成します。

6.2. フォールバックの順序決定：position-try-orderプロパティ

このプロパティは位置オプションリストが試行される順序を指定します。

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

normal

位置オプションを position-try-fallbacksで指定した順に試みます。

most-width

most-height

most-block-size

most-inline-size

位置オプションリストの各エントリについて、 その位置オプションを適用し、 そのスタイルで得られるinset-modified包含ブロックのサイズを調べます。 このサイズでリストを安定ソートし、最大のものを先頭にします。

.anchor { anchor-name: --foo; }
.list {
  position: fixed;
  position-anchor: --foo;
  position-area: block-end span-inline-end;
  align-self: start;
  position-try-fallbacks: --bottom-scrollable, flip-block, --top-scrollable;
  position-try-order: most-height;
}
@position-try --bottom-scrollable {
  align-self: stretch;
}
@position-try --top-scrollable {
  position-area: block-start span-inline-end;
  align-self: stretch;
}

6.3. ショートハンド：position-try

このショートハンドはposition-try-fallbacksとposition-try-order両方を設定します。 <'position-try-order'>を省略した場合、 プロパティの初期値が設定されます。

6.4. @position-tryルール

@position-tryルールは、 名前付きの位置オプションを定義し、 1つ以上の配置プロパティセットを指定して、 position-try-fallbacks経由でボックスに適用できます。

@position-tryルールの構文は以下の通りです：

@position-try <dashed-ident> {
  <declaration-list>
}

前置部で指定された<dashed-ident>がルール名です。 同名の@position-tryルールが複数ある場合、 カスケードは@keyframeルールと同様に動作します。

@position-tryルールは、許可プロパティのみ受け付けます：

• インセットプロパティ

• マージンプロパティ

• サイズ指定プロパティ

• セルフアラインメントプロパティ

• position-anchor

• position-area

<declaration-list>内のプロパティで!importantを使うのは無効です。 そうするとそのプロパティ自体が無効になりますが、 ルール全体が無効になるわけではありません。

@position-try内のすべてのプロパティは 位置フォールバック起点の一部としてボックスに適用されます。 これは新しいカスケード起点で、 著者起点と アニメーション起点の間に位置します。

アニメーション起点と同様、 revert値は あたかも著者起点の一部であるかのように動作し、 代わりにユーザー起点に戻ります。 （ただしアニメーション起点と同じく revert-layerは特別な挙動はなく指定通りです。）

注: 許可プロパティは ボックス自体のサイズと位置だけに影響する最小限のグループです。 これによりフォールバック実装が大幅に簡素化され、 空間に合わせてアンカーポジションボックスを移動するという根本ニーズに対応できます。 これらのルールは著者起点の通常宣言を上書きするため、 @position-try宣言と 通常のカスケード・継承の悪影響も限定されます。 将来的にはコンテナクエリ拡張により、 使用中のフォールバックスタイルに基づく要素のクエリが可能になることが期待され、 この制限リストでは許可されない条件付きスタイリングも実現できるでしょう。

注: 異なるアンカーを使う複数ボックスが 同じフォールバック配置を使いたい場合は、 <anchor-name>をanchor()で省略し、 それぞれのボックスのアンカーはposition-anchorで指定します。

注: フォールバック配置として最も一般的なタイプ （通常はアンカーの一方に配置し、必要なら反対側に反転する）は、 position-try-fallbacksのキーワードだけで自動実装可能で、 @position-tryは不要です。

6.5. フォールバックの適用

配置ボックスが （default scroll shiftでシフト済み）、 inset-modified包含ブロックからはみ出し、 かつ非空の位置オプションリストを持つ場合、 フォールバックスタイル決定を行い、 はみ出しを回避できるオプションを探します。

これらの修正スタイルはインターリーブで要素に適用され、 算出値（トランジション等も可能）に影響し、 レイアウトや使用値にも依存します。

このセクションをより明確かつ正確に書きなおしてください。 Issue 12818, Issue 12890参照。

完全なレイアウトパス中、 ボックスがフォールバックスタイルを決定（または使用しないと決定）した後は、 後でレイアウトされる他のボックスがこの決定を変更することはできません。

実装は、位置オプションリストの長さに実装定義の上限を設けてもよいですが、 この制限は最低5以上でなければなりません。

#myPopover {
  position: fixed;
  top: anchor(--button bottom);
  left: anchor(--button left);
  position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;

  /* ポップオーバーはボタンと同じ幅以上 */
  min-width: anchor-size(--button width);

  /* ポップオーバーは最低2メニュー項目分の高さ */
  min-height: 6em;
}

6.6. 条件付き非表示：position-visibility プロパティ

絶対位置指定ボックス（absolutely positioned box）の表示が 意味を持たない場合があります。 このプロパティは、よく必要とされるレイアウト条件に応じて そのようなボックスを条件付きで表示することを可能にします。

always

このプロパティは効果を持ちません。 （アンカーやオーバーフロー状態に関係なくボックスが表示されます。）

anchors-valid

ボックスの必須アンカー参照のいずれかが ターゲットアンカー要素に解決されない場合、 ボックスのvisibilityプロパティはforce-hiddenに算出されます。

必須アンカー参照とは何か？ フォールバック値のないanchor()関数？ デフォルトアンカーは「時々」？ ここは要詳細化。

どれかアンカーが不足か、 すべてアンカーが不足か？ どちらもユースケースが考えられる。 決定するか制御可能にすべきか？

anchors-visible

ボックスにデフォルトアンカーボックスがある場合、 そのアンカーボックスが 不可視または 介在ボックスによりクリップされている場合、 ボックスのvisibilityプロパティはforce-hiddenに算出されます。

no-overflow

ボックスがinset-modified包含ブロックから position-try適用後もはみ出している場合、 ボックスのvisibilityプロパティはforce-hiddenに算出されます。

7. アクセシビリティへの影響

アンカーポジショニングは 配置ボックスとアンカー間に セマンティックな関係を自動的に確立するものではありません。 様々な用途で使えるためです。 著者は、単なる視覚的な配置だけで 要素同士をセマンティックに関連付けることに依存してはなりません。 追加的な支援なしでは、 要素間に意味のあるDOM関係が全くないことが多く、 スクリーンリーダー等の非視覚的ユーザーエージェントで利用困難になります。

ウェブプラットフォームには、 既存・新規ともに このような関係を明示的に確立できる機能が多数あります。 そのため非視覚的ユーザーエージェントでも恩恵を受けられます。

例えば、HTMLのPopover APIは 呼び出しボタンとポップオーバー要素を自動的にリンクし、 タブ順も自動調整されます。 さらに呼び出しボタンが ポップオーバーの暗黙的アンカー要素となり、 アンカーポジショニングも簡単に利用できます。

ポップオーバーの例を追加すること。

より一般的な場合には、 ARIAのaria-detailsや aria-describedby属性を アンカー要素に付与することで 少し手動の方法で情報を提供できます。 配置要素側で role 属性を指定すれば、 非視覚的ユーザーエージェントは 要素間の関係をユーザーに通知し、 要素間の自動ナビゲーションも可能になります。

8. DOMインターフェイス

8.1. CSSPositionTryRuleインターフェイス

CSSPositionTryRule インターフェイスは @position-tryルールを表します：

[Exposed=Window]
interface CSSPositionTryRule : CSSRule {
  readonly attribute CSSOMString name;
  [SameObject, PutForwards=cssText] readonly attribute CSSPositionTryDescriptors style;
};

[Exposed=Window]
interface CSSPositionTryDescriptors : CSSStyleDeclaration {
  attribute CSSOMString margin;
  attribute CSSOMString marginTop;
  attribute CSSOMString marginRight;
  attribute CSSOMString marginBottom;
  attribute CSSOMString marginLeft;
  attribute CSSOMString marginBlock;
  attribute CSSOMString marginBlockStart;
  attribute CSSOMString marginBlockEnd;
  attribute CSSOMString marginInline;
  attribute CSSOMString marginInlineStart;
  attribute CSSOMString marginInlineEnd;
  attribute CSSOMString margin-top;
  attribute CSSOMString margin-right;
  attribute CSSOMString margin-bottom;
  attribute CSSOMString margin-left;
  attribute CSSOMString margin-block;
  attribute CSSOMString margin-block-start;
  attribute CSSOMString margin-block-end;
  attribute CSSOMString margin-inline;
  attribute CSSOMString margin-inline-start;
  attribute CSSOMString margin-inline-end;
  attribute CSSOMString inset;
  attribute CSSOMString insetBlock;
  attribute CSSOMString insetBlockStart;
  attribute CSSOMString insetBlockEnd;
  attribute CSSOMString insetInline;
  attribute CSSOMString insetInlineStart;
  attribute CSSOMString insetInlineEnd;
  attribute CSSOMString top;
  attribute CSSOMString left;
  attribute CSSOMString right;
  attribute CSSOMString bottom;
  attribute CSSOMString inset-block;
  attribute CSSOMString inset-block-start;
  attribute CSSOMString inset-block-end;
  attribute CSSOMString inset-inline;
  attribute CSSOMString inset-inline-start;
  attribute CSSOMString inset-inline-end;
  attribute CSSOMString width;
  attribute CSSOMString minWidth;
  attribute CSSOMString maxWidth;
  attribute CSSOMString height;
  attribute CSSOMString minHeight;
  attribute CSSOMString maxHeight;
  attribute CSSOMString blockSize;
  attribute CSSOMString minBlockSize;
  attribute CSSOMString maxBlockSize;
  attribute CSSOMString inlineSize;
  attribute CSSOMString minInlineSize;
  attribute CSSOMString maxInlineSize;
  attribute CSSOMString min-width;
  attribute CSSOMString max-width;
  attribute CSSOMString min-height;
  attribute CSSOMString max-height;
  attribute CSSOMString block-size;
  attribute CSSOMString min-block-size;
  attribute CSSOMString max-block-size;
  attribute CSSOMString inline-size;
  attribute CSSOMString min-inline-size;
  attribute CSSOMString max-inline-size;
  attribute CSSOMString placeSelf;
  attribute CSSOMString alignSelf;
  attribute CSSOMString justifySelf;
  attribute CSSOMString place-self;
  attribute CSSOMString align-self;
  attribute CSSOMString justify-self;
  attribute CSSOMString positionAnchor;
  attribute CSSOMString position-anchor;
  attribute CSSOMString positionArea;
  attribute CSSOMString position-area;
};

そのname属性は、 規則プレリュードで宣言された名前を表します。

そのstyle属性は、 規則本体で宣言されたプロパティを 指定順で表します。 取得時には、CSSPositionTryDescriptors オブジェクトを返します。 @position-tryアトルール用であり、 以下のプロパティを持ちます：

computed flag

未設定

readonly flag

未設定

declarations

規則中で宣言された記述子を指定順で並べたもの。

parent CSS rule

コンテキストオブジェクト

owner node

Null

9. 付録：スタイルとレイアウトのインターリーブ

スタイルとレイアウトのインターリーブとは、 レイアウト処理中にサブツリーにスタイル更新が発生し、 要素の算出スタイルが遡って更新される技法です。

この概念はこの仕様書の正しい場所ではなく、 Cascadeに入るべきですが、 参照用のスケッチが必要なので暫定で記載しています。

注: スタイルとレイアウトのインターリーブは コンテナクエリ やコンテナクエリ長ですでに使われています。 10cqwのような長さは クエリコンテナのサイズ情報を用いて算出長に解決され、 コンテナサイズがレイアウト間で変化すると トランジションが発生します。

許可された@position-tryプロパティも フォールバック解決時にインターリーブされます （position-try参照）。

当然詳細化が必要ですが、 今は「コンテナクエリと同様に振る舞う」で十分です。 この挙動も未定義ですが、少なくともある程度は相互運用されているようです。

10. セキュリティに関する考慮事項

この文書に対してセキュリティ上の問題は報告されていません。

11. プライバシーに関する考慮事項

この文書に対してプライバシー上の問題は報告されていません。

12. 変更点

2025年5月9日作業草案以降の主な変更点：

• x/y-self-start/endキーワードをposition-area用にself-x/y-start/endへ名称変更しました。 順序の混乱が続いたためです。 (Issue 12749)

• position-areaが、ボックスの包含ブロックがスクロールコンテナの場合に（新定義の）スクロール可能な包含ブロックを使うようにしました。 (Issue 10861)

• 単一のautoなinset軸に対するposition-areaのデフォルト整列を、非auto側に揃うように変更しました。 (Issue 12512)

• transformがアンカーボックスのジオメトリに影響するようにしました。 (Issue 8584)

• dialog値をalign-selfとjustify-selfに追加し、 HTMLポップオーバーのUAデフォルトスタイルの問題を解決しました。 (Issue 10258)

• フラグメント化がアンカーボックスのジオメトリにどう影響するかを明確にしました。 (Issue 12287)

• 最後に成功した位置オプションがクリアされる条件を明確化しました。 (Issue 12577)

• ツリースコープ名のアンカーがanchor-scopeとposition-anchorでどう一致するかを明確化しました。 (Issues 7916, 9408, 5984)

• トップレイヤーが有効なアンカー要素の探索にどう関与するかを明確化し、 有効なアンカーの判定規則をより分かりやすく書き直しました。 (Issue 11602)

• position-try-fallbacksの文法を修正し、noneキーワードのリストを除外しました。 (Issue 12838)

• 細かな修正と明確化を行いました。 (Issue 11028, Issue 11080, Issue 12058, Issue 12636, Issue 12653, Issue 12732)

以前の変更点はPrevious Changes参照。