ガイド: アンカー配置（CSS Anchor Positioning）

ある要素（アンカー）を基準に別の要素を配置する仕組み。2026年1月の Firefox 147 で全主要ブラウザ対応（Chrome/Edge 125+、Safari 26+）。

基本の3ステップ

.trigger { anchor-name: --a; }          /* 1. アンカーに名前を付ける */
.panel {
  position-anchor: --a;                  /* 2. 配置する側で参照 */
  position-area: block-end;              /* 3. 位置（または top: anchor(bottom) など） */
  position-try-fallbacks: flip-block;    /* はみ出したら反転 */
}

用途別の記事

1. ドロップダウン/メニュー — Popover API と組み合わせて JS なし Popover API ＋ Anchor Positioning ＋ position-try-fallbacks で JS なしドロップダウン
2. ツールチップの中央寄せ — justify-self: anchor-center ツールチップの中央寄せは translate(-50%) ではなくアンカー配置で
3. 吸い付くホバー表示 — ホバー中の要素へ1つのインジケーターを移動 アンカー配置で「吸い付く」ホバーインジケーター

注意

• position-area は「エリア」指定。右端揃えなど辺を揃えたいときは anchor() 関数を使う。
• popover の出現アニメは @starting-style（@starting-style で popover を display:none からフェードイン）と組み合わせると自然。
• inset のアニメーションはブラウザによって動かない場合がある（@tak_dcxi の JSなしグロナビ投稿で Firefox について言及あり）。