CSS Anchor Positioning徹底解説 CSS Anchor Positioning徹底解説 |

ツールチップ、ドロップダウン、ポップオーバー、トースト通知。

フロントエンドをやっていると「この要素を、別の要素の横にぴったり添わせて出したい」という場面は山ほどあります。

今まではだいたいこうでした。

対象要素の座標を JavaScript で取る
ポップアップ側の width / height も JSで測って、位置を計算
スクロールやリサイズのたびに再計算
画面外にはみ出したら、上下を切り替える…

そして心の中でこうつぶやくわけです。

「これ、本当はCSSだけでやりたいんだけどな…」

その「本当はCSSでやりたい」をかなり本気で叶えようとしているのが

CSS Anchor Positioning（CSS アンカー位置指定） です。

この記事では、

Anchor Positioning とは何か
anchor-name / position-anchor / anchor() / position-area の役割
よくあるUI（ツールチップやポップオーバー）の具体例
ブラウザ対応と実務での付き合い方
ちょっとクセのあるポイントと回避策

までを、フロントエンド実務目線でがっつり解説します。

CSS Anchor Positioning とは何か
基本コンセプトをざっくり理解する 2-1. アンカー要素とアンカー位置指定要素 2-2. anchor-name と position-anchor 2-3. anchor() 関数と position-area
一番よくある使い方：ボタンにくっつくツールチップ
position-area で「置き場所の候補」を CSS だけで指定する
はみ出し対策と代替位置、そして「出さない」という判断
Popover API や Top Layer と組み合わせる
ブラウザ対応状況と実務での戦い方
よくある落とし穴と注意点
WordPress プロジェクトにどう組み込むか
さらに学びを深めるための関連トピック

1. CSS Anchor Positioning とは何か

公式には、Anchor Positioning は

「ページ上の他の要素（アンカー要素）に対して、

絶対配置要素の位置やサイズを相対的に決めるための仕組み」

と定義されています。

もう少し人間の言葉にすると、

「親子関係に関係なく、

任意の要素を基準にして別の要素を配置できる CSS」

という感じです。

具体的には、

anchor-name で「ここをアンカーにするよ」と宣言
position-anchor で「この子はあのアンカーにくっつくよ」と関連付け
anchor() 関数や position-area で、「アンカーの右側」「上」「中央」などの位置を指定

することで、ツールチップやポップオーバーを

CSSだけでそれっぽい位置に置けるようになります。

Chrome チームも「メニュー、サブメニュー、ツールチップ、ダイアログなど複雑なUIレイアウトをシンプルにする」とかなり推している機能です。

2. 基本コンセプトをざっくり理解する

Anchor Positioning を理解するうえで、覚えるべきキーワードは4つです。

anchor-name
position-anchor
anchor() 関数
position-area

順番に見ていきます。

2-1. アンカー要素とアンカー位置指定要素

世界観としてはシンプルです。

アンカー要素 → 基準になる側（ボタン、アイコンなど）
アンカー位置指定要素 → くっついて表示したい側（ツールチップ、ポップオーバーなど）

「ボタンに対してポップオーバーを表示したい」なら、

ボタンがアンカー要素、ポップオーバーがアンカー位置指定要素になります。

2-2. anchor-name と position-anchor

まず、アンカー要素側で「自分に名前を付ける」ところから始まります。

<button class="btn-help">
  使い方
</button>

<div class="tooltip">
  ここに説明文が入ります。
</div>

.btn-help {
  anchor-name: --help-button;
}

.tooltip {
  position: absolute;
  position-anchor: --help-button;
}

anchor-name → アンカー要素に「–help-button」という名前を付ける
position-anchor → tooltip が「–help-button」というアンカーにくっつくと宣言

この2つで「誰と誰がペアなのか」が決まります。

同じアンカー名を持つ要素が複数ある場合、

ソース順で「最後に現れたもの」に関連付けられます。

2-3. anchor() 関数と position-area

アンカーとの関連付けができたら、

次は「どこに置くか」です。

やり方は大きく2つあります。

anchor() 関数で、inset系プロパティを細かく指定
position-area で「ざっくりどの位置か」を指定

1. anchor() 関数

anchor() は、アンカー要素のある辺の位置を表す関数です。

例えば、

.tooltip {
  position: absolute;
  position-anchor: --help-button;
  left: anchor(right);
  top: anchor(top);
}

と書くと、

tooltip の左辺を、ボタンの右辺に揃える
tooltip の上辺を、ボタンの上辺に揃える

という意味になります。

anchor(top) / anchor(bottom) / anchor(left) / anchor(right) などを

組み合わせることで、かなり柔軟に「くっつき方」を制御できます。

calc() とも組み合わせ可能なので、

left: calc(anchor(right) + 8px);
top: calc(anchor(top) - 4px);

のように、ちょっとだけ離したりもできます。

2. position-area

もう少しざっくり指定したい場合は、position-area が便利です。

position-area は、アンカーの周囲に「3×3のグリッド」を仮想的に作って

どのエリアに置くかを指定するプロパティです。

.tooltip {
  position: absolute;
  position-anchor: --help-button;
  position-area: top;
}

とすると、「アンカーの真上」に配置されます。

左右や中央を指定したいときは、

.tooltip {
  position-area: top center;
}

.tooltip {
  position-area: right;
}

.tooltip {
  position-area: bottom left;
}

のように、組み合わせも可能です。

また、span-all というキーワードを使うと

アンカーを含む行または列に「またがって」配置することもできます。

3. 一番よくある使い方：ボタンにくっつくツールチップ

実際のコード例を見てみましょう。

3-1. シンプルなツールチップ

<button class="btn-help" aria-describedby="tip-help">
  使い方
</button>

<div class="tooltip" id="tip-help">
  クリックすると、入力の例が表示されます。
</div>

.btn-help {
  position: relative; /* レイアウトには関係ないが、既存のCSSの都合で付けることも */
  anchor-name: --help;
}

.tooltip {
  position: absolute;
  position-anchor: --help;
  position-area: top;
  margin-block-end: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  background: #333;
  color: #fff;
  font-size: 0.875rem;
}

これだけで、

ボタンの真上
適度な余白
後からボタン位置が変わっても追従

というツールチップが、CSSだけで作れます。

もちろん実戦では、

hover / focus時だけ表示
スマホでは挙動を変える

などなど追加が必要ですが、

「位置決め」そのものはCSSにお任せできるようになった、というのがポイントです。

3-2. anchor() で細かく調整する

「ボタンの右上から出したい」など、より細かく制御したい場合は anchor() を使います。

.tooltip {
  position: absolute;
  position-anchor: --help;
  left: anchor(right);
  bottom: anchor(top);
  transform: translateY(-4px);
}

left を anchor(right) にすれば、ボタンの右端に揃う
bottom を anchor(top) にすると、ボタンの上辺に揃う
transform で微調整

という組み合わせです。

transform と一緒に使うときは、

後述する「変形との相性」の話も少し意識しておくと安心です。

4. position-area で「置き場所の候補」を CSS だけで指定する

Anchor Positioning が面白いのは、

「ここに置きたいけど、画面外にはみ出すなら代わりにこっちね」

という「候補リスト」を CSSで書けるところです。

4-1. 位置の候補を並べる

position-area は、スペース区切りで複数の候補を指定できます。

.tooltip {
  position: absolute;
  position-anchor: --help;
  position-area: top, bottom;
}

この場合、

まず「top」に置けるか試す
はみ出すようなら「bottom」に置いてみる

という挙動になります。

さらに細かく書くと：

.tooltip {
  position-area:
    top center,
    bottom center,
    right,
    left;
}

最優先は「上中央」
それがだめなら「下中央」
それもだめなら「右」、最後に「左」

と、CSSだけで結構人間的なロジックを書けます。

4-2. レスポンシブとも相性が良い

メディアクエリと組み合わせれば、

@media (min-width: 768px) {
  .tooltip {
    position-area: right, left, top;
  }
}

@media (max-width: 767px) {
  .tooltip {
    position-area: bottom, top;
  }
}

のように、

PCでは左右優先
スマホでは上下優先

というような設計も簡単です。

5. はみ出し対策と代替位置、そして「出さない」という判断

Anchor Positioning には、「そもそも出さない」という選択肢も用意されています。

5-1. アンカーに結びつけない方がいい状況

MDN のガイドでは、

「アンカーに結びつけるべきかどうかを条件で決める」という考え方も紹介されています。

例えば、

スクロール位置の関係でどうやっても画面外にはみ出す
モバイルの超狭い画面で、アンカーに添わせると逆に読みにくい

といった場合には、「一定の条件を満たさないときは非表示」とする方がUX的に正しいこともあります。

仕様としても、

「アンカーに結びつけるのが適切でない状況では要素を隠す」ための CSS 的な仕組みが用意されています。

実装パターンはいくつかありますが、

JS側でクラスを付け替えて、display: none にする
Popover APIの popover=”auto” ＋アンカー位置指定で、そもそもクリックされない限り出さない

などが現実的です。

6. Popover API や Top Layer と組み合わせる

Anchor Positioning が本領を発揮するのは、Popover API や

ダイアログのような「Top Layer に乗る要素」と組み合わせたときです。

Top Layer 上にある要素は、通常の文書フローから切り離されているため、

position: absolute で親要素を基準に
position: fixed でビューポートを基準に

といった従来の手法では「どの要素の横にくっつけるか」を表現しづらい問題がありました。

Anchor Positioning を使えば、

<button id="btn-menu" popovertarget="popover-menu">
  メニュー
</button>

<div id="popover-menu" popover>
  ...
</div>

#btn-menu {
  anchor-name: --menu-button;
}

#popover-menu {
  position-anchor: --menu-button;
  position-area: bottom;
}

のように、Top Layer 上のポップオーバーに対しても

「このボタンの下に出してね」と CSS で指定できます。

7. ブラウザ対応状況と実務での戦い方

楽しい話ばかりしてきましたが、

Anchor Positioning はまだ「完全普及」とは言えません。

7-1. 現在の対応状況（ざっくり）

2025年末時点の情報をざっくりまとめると：

Chrome / Edge → サポートあり（最新版ではフラグなしで利用可能）
Safari → 新しいバージョンでサポート（機能状況は WebKit のステータスで徐々に拡大）
Firefox → まだ実装途上。テスト系ビルドや behind a flag 段階の情報が多い。
Can I use → グローバル利用率は 70％台、まだ Baseline には入っていない機能。

MDN でも「Limited availability」と明記されており、

主要ブラウザの一部ではまだ動かないとされています。

7-2. 実務でのおすすめ方針

現時点では、実務で使うなら

「必須UIの唯一の手段」にするのは避ける
Progressive Enhancement として「使えるブラウザでは便利に、だめなら従来方式」を基本にする
重要アプリケーションでは、まだ JS 版（Popper など）との併用も検討

くらいがバランスの良い立ち位置です。

Anchor Positioning は、既存レイアウトの改善 として

じわじわ導入していくと精神衛生的にも良さそうです。

7-3. Polyfill という選択肢

どうしても今すぐガッツリ使いたい場合は、

OddBird が公開している Polyfill もあります。

これは CSS Anchor Positioning の仕様に沿って

JS で同等の挙動を再現するライブラリで、

CSSの記述は基本的にそのまま
未対応ブラウザでは JS が裏で位置計算してくれる

というスタイルになっています。

ただし、ポリフィルを入れると

JS バンドルのサイズ増
デバッグ対象が増える
将来的なネイティブ実装との兼ね合い

なども出てくるので、プロジェクトごとにメリットを検討したいところです。

8. よくある落とし穴と注意点

新しい仕様だけあって、クセもいくつか報告されています。

8-1. transform との相性

アンカーとなる要素や、その親要素に transform がかかっている場合、

座標系が変わるため Anchor Positioning の計算結果も変わります。

スケールや回転、3D変形を使っているコンポーネント
アニメーションで transform を多用しているレイアウト

などでは、

実機での動き
スクロール時の挙動

をしっかり確認するのがおすすめです。

8-2. display: none と visibility: hidden

アンカー要素が

display: none
visibility: hidden
content-visibility: hidden

のような状態になっていると、

アンカー位置指定された要素も表示されなくなります。

SPAでルーティングしたり、

アコーディオンで display を切り替えている場合などは

「アンカーの状態が変わっていないか」を確認しましょう。

8-3. position: absolute / fixed が前提

position-anchor が意味を持つのは、

position: absolute
position: fixed

などの「絶対配置された要素」です。

position: relative や static のままではアンカー位置指定にはなりません。

8-4. Firefox でのフォールバック

Firefox 未対応の現状では、

フォールバックとしてシンプルな position: absolute ＋従来の top / left と

メディアクエリを使ったレイアウトを用意するのが現実的です。

重要UIなら JS で位置を補正
補助的な装飾なら「Firefox ではやや簡素な挙動でも良し」と割り切る

など、優先順位に応じて決めていきましょう。

9. WordPress プロジェクトにどう組み込むか

「Anchor Positioning 面白そうだけど、実際の案件でどう使うの」という話。

9-1. グローバルナビのドロップダウン

ブロックテーマやカスタムテーマで

ヘッダーメニューを作るとき、

サブメニューの位置決めに Anchor Positioning は相性が良いです。

親 .menu-item に anchor-name
サブメニュー .sub-menu に position-anchor と position-area: bottom

といった感じで、

JSなしのドロップダウン位置取りがしやすくなります。

9-2. カスタムブロックのヒント表示

ACF ブロックや Gutenberg カスタムブロックで

「ここに入力ヒントのアイコン」
「アイコンを押したら説明を出したい」

といったケースでも、

アンカーをブロック内部のアイコンにしておけば

ヒントボックスの位置決めをCSSに任せられます。

9-3. 導入時のポイント

テーマ側の style.css や editor-style.css で Anchor Positioning を使うかどうかを決める
重要なUIであれば、Firefox向けに従来の position: absolute レイアウトも書いておく
必要ならポリフィルも検討（ただし軽量テーマでは慎重に）

10. さらに学びを深めるための関連トピック

最後に、「Anchor Positioning と一緒に押さえておくと強い」トピックや

参考になる記事をいくつか紹介しておきます。

10-1. Chrome公式の Anchor Positioning ガイド

Chrome DevRel が出している公式ブログ／ドキュメントは必読レベルです。

なぜこの仕様が生まれたのか
どういうUIで威力を発揮するか
position-area と anchor() の両方の使い分け

などが豊富なコード例付きで説明されています。

10-2. MDN の日本語ドキュメント

MDN には、

「CSS アンカー位置指定」のガイドページ
position-anchor など各プロパティのリファレンス
anchor() 関数の説明

がまとまっています。

仕様の更新に追従してくれているので、

「今書いていい文法か」を確認するのにも便利です。

10-3. 実戦的なブログ記事

CSS Tricks の Anchor Positioning ガイドやクイックリファレンス
Ahmad Shadeed 氏による「The Basics of Anchor Positioning」
日本語では Zenn にも丁寧な解説記事があります

など、実際のUIコンポーネントを題材にした記事を読むと

「あ、これ自分の案件のあそこに使えそう」とイメージしやすくなります。

まとめ：Anchor Positioning は「絶対配置の次の一手」

CSS Anchor Positioning をざっくりまとめると、

任意の要素を「アンカー」として名前付きで登録できる
別の絶対配置要素が、そのアンカーに向かって「くっつく」ことができる
anchor() や position-area によって、位置や候補を CSS だけで指定できる
はみ出し対策や Top Layer との連携など、これまで JS 頼みだった仕事を CSS に任せられる
ただし、まだブラウザ対応は発展途上なので Progressive Enhancement 前提で採用するのが現実的

という機能でした。

ポップオーバーやツールチップの実装は、

これまで「フロントエンドで一番地味に面倒な分野」のひとつでしたが、

Anchor Positioning はそこにかなり真面目に殴り込みをかけている仕様です。

新しい UI を作るとき
既存サイトのドロップダウンやツールチップをリファクタリングするとき

に、「ここはAnchor Positioningで書けないかな」と一度考えてみると、

コードの見通しがかなり良くなると思います。

(Visited 2 times, 1 visits today)

目次