⚓
CSSアンカーポジショニング
JSなしで要素を他の要素にアンカー固定
ツールチップ、ポップオーバー、ドロップダウンメニューなどのUI要素をトリガー要素に正確に位置づけることはPopper.jsのようなJavaScriptライブラリに依存していました。CSSアンカーポジショニングはanchor-nameで基準要素を指定し、position-anchorとanchor()関数で相対位置を計算します。
ビューポート境界を超える場合はposition-tryフォールバックで自動再配置まで処理でき、複雑なJavaScript位置計算コードを置き換えます。
適用方法
1
基準要素にanchor-name: --triggerを宣言する
2
位置づける要素にposition-anchor: --triggerを指定する
3
anchor()関数でtop、leftなどの位置を計算する
4
position-tryでビューポート外のフォールバック位置を定義する
メリット
- ✓ JavaScript位置計算ライブラリ（Popper.jsなど）が不要になる
- ✓ ビューポート境界フォールバックをCSSだけで処理できる
デメリット
- ✗ まだChromiumベースのブラウザでのみ完全サポート
- ✗ 複雑なアンカー関係のデバッグが厄介な場合がある
ユースケース
フォームフィールド横に表示されるバリデーションツールチップ
ボタンクリック時に表示されるコンテキストメニューの位置自動決定