CSSアンカー位置指定

何を解決する仕様か

ツールチップやドロップダウン、ポップオーバーを「基準要素の近くに、画面からはみ出さないように」配置する処理は、従来 JavaScript が担ってきました。基準要素の getBoundingClientRect() を取得し、ビューポート残り幅を見て左右反転を判定し、スクロールやリサイズのたびに再計算する——という一連の処理です。CSS アンカー位置指定（CSS Anchor Positioning）は、この座標計算をブラウザのレイアウトエンジン内部に持ち込み、宣言的な CSS だけで完結させる仕様です。核となるのは「アンカーを名付ける」「アンカーを基準に置く」「はみ出したら代替案に切り替える」という3つの機能です。

アンカーの宣言と参照

任意の要素は anchor-name プロパティでアンカーとして名付けられます。名前は -- から始まるカスタム識別子です。

.trigger {
  anchor-name: --my-anchor;
}

位置指定される側（position: absolute または fixed の要素）は position-anchor でどのアンカーを参照するかを宣言し、top/left/inset などのオフセットプロパティの値に anchor() 関数を使うことで、アンカーの辺や中心を基準値として取り込みます。

.tooltip {
  position: fixed;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

anchor(bottom) はアンカー要素の下辺の座標、anchor(center) は中心座標を返します。anchor() は top/right/bottom/left/start/end/center に加え、パーセンテージ（anchor(30%) のように辺の間を補間）も受け付けます。重要なのは、この計算が通常の包含ブロックの親子関係を必要としない点です。位置指定要素とアンカー要素は DOM 上どこにあっても構いません。ポップオーバーを body 直下に置きつつ、ボタンの真下に出す、といった構造がそのまま書けます。この仕組みは包含ブロックと位置指定（position）の解決過程で説明した「absolute は直近 positioned 祖先のパディング領域を基準にする」という原則の外側に、アンカーという第二の基準系を追加するものだと理解すると位置づけが明確になります。

サイズ合わせには anchor-size()

アンカーの幅・高さに追従してサイズを決めたい場合は anchor-size() を使います。例えばドロップダウンの幅をトリガーボタンと揃えるには次のようにします。

.dropdown {
  position: fixed;
  position-anchor: --my-anchor;
  width: anchor-size(width);
  top: anchor(bottom);
  left: anchor(left);
}

anchor() が「位置」、anchor-size() が「寸法」を担当するという役割分担です。どちらも参照先は position-anchor で結び付けたアンカー、または個々のオフセットで明示する anchor() の第一引数（アンカー名）で上書きできます。

フォールバック位置：position-try-fallbacks

アンカー位置指定の実用上の核心は、画面端での自動反転です。ツールチップを常に「アンカーの下」に置くと決め打ちすると、画面下端付近の要素では吹き出しが画面外にはみ出します。これを解決するのが position-try-fallbacks です。あらかじめ複数の配置案を宣言しておくと、ブラウザは最初の案ではみ出しが発生する場合に自動で次の案を試し、実際にビューポート内に収まる案を採用します。

.tooltip {
  position: fixed;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

flip-block はブロック方向（多くの場合縦方向）の配置を反転し、flip-inline はインライン方向（横方向）を反転します。組み合わせて指定すると、最初にはみ出さない組み合わせが優先度順に採用されます。独自の代替案を細かく書きたい場合は @position-try ルールで名前付きの代替スタイルセットを定義し、position-try-fallbacks からその名前を参照します。

@position-try --above {
  top: anchor(top);
  bottom: unset;
  translate: -50% -100%;
}

.tooltip {
  position-try-fallbacks: --above;
}

ポップオーバーAPIとの関係

popover 属性（popoverとdialogの標準化されたUI状態管理で扱われるようなネイティブ開閉制御）と組み合わせると、ポップオーバーは表示時にトップレイヤーへ昇格し、位置指定要素としての fixed 配置とアンカー位置指定の相性が特に良くなります。トップレイヤーに載った要素は他要素の overflow: hidden などに影響されず、アンカーとの位置関係だけで配置が決まるため、スタッキングコンテキストとz-indexで説明される重なり順の問題も同時に解消します。

まとめ