アンカーポジショニング vs position: fixed — どちらを使うか

早見表

シナリオ	使うもの
要素が他の要素に追従	アンカーポジショニング
要素をビューポートに固定（ヘッダー、FAB）	position: fixed
親内に絶対配置（追従なし）	position: absolute
ツールチップ / ドロップダウン / ポップオーバー	アンカーポジショニング
モーダルダイアログ（中央）	position: fixed + inset: 0
モーダルダイアログ（トリガーにアンカー）	アンカーポジショニング
スティッキーテーブルヘッダー	position: sticky
フローティングアクションボタン	position: fixed

ツールチップにアンカーポジショニングが position: absolute に勝る理由

アンカーポジショニング以前のツールチップパターンは：

<span style="position: relative;">
  <button>トリガー</button>
  <div class="tooltip" style="position: absolute; bottom: 100%; left: 50%;">...</div>
</span>

これは動きますが問題があります：

1. ラッパー必須：すべてのトリガーに position: relative 親が必要。
2. オーバーフロークリッピング：祖先に overflow: hidden がある場合（カード、モーダル、<details> 要素では非常によくある）、ツールチップがクリップされる。
3. 自動反転なし：トリガーがビューポート端付近だとツールチップがはみ出す。
4. 兄弟限定：ツールチップはトリガーの兄弟、または同じラッパーの子孫である必要がある。

アンカーポジショニングは4つすべてを修正します。ターゲットはドキュメント内のどこにでも置け、anchor-name と position-anchor がDOMをまたいで両者を接続します。

position: fixed が依然として有用な理由

position: fixed は他の要素には追従せず、ビューポート内の所定位置に留まります。ヘッダー、サイドバー、FAB、トースト通知にはまさにこれが必要です。

両者を 組み合わせる こともできます：position: fixed; position-anchor: --x; position-area: bottom のターゲットはビューポート座標で固定されつつ、スクロールコンテナ内のアンカーを追跡します。これは overflow: hidden 祖先から脱出すべきツールチップに最適なパターンです。

移行戦略

既存の position: absolute ツールチップコードはそのままで動きます — 移行の必要はありません。アンカーポジショニングは段階的に採用してください：新しいコンポーネントは新方式、古いコンポーネントは別の理由で触るときまで現状維持。