CSS Anchor Positioningとは何ですか？

CSS単体でツールチップやポップオーバーを任意の要素に「アンカー」して位置決めできる新仕様。JavaScriptなしでフローティングUIを実現できる。

CSS Anchor Positioningのポイントは？

anchor-name/position-anchorプロパティで要素を紐付ける。position-try-fallbacksでビューポートはみ出しを自動回避。JavaScript不要でPopper.jsの機能をCSS実装。Chrome 125以降でフラグなし対応、他ブラウザも追随中

【しーえすえすあんかーぽじしょにんぐ】

公開: 2026年8月13日

💡 「JSなしでツールチップを吸着」——CSSだけで要素に紐付けてフローティングUIを実現する新仕様

📌 このページのポイント

anchor-nameで紐付けたツールチップがビューポート端で自動的に位置を切り替える

ひよこ

ペンギン先生、ボタンにマウスを乗せたときに出るツールチップって、JavaScriptで作るものだと思ってたんだけど、CSSだけでできるの？

ペンギン先生

新しい仕様の「CSS Anchor Positioning」を使えばできるよ！ボタンに anchor-name: --btn を付けて、ツールチップ側に position-anchor: --btn を書くだけで、CSSが自動で位置を計算してくれるんだよ。

ひよこ

今まではJavaScriptが必要だったの？

ペンギン先生

そうだよ。Popper.jsやFloating UIというライブラリで要素の座標を計算してたんだけど、これはJavaScriptで「要素の位置を読んで→計算して→スタイルを書き換える」という手順が必要だったんだよ。

ひよこ

ツールチップが画面の端に近いときはみ出しちゃいそうだけど、それはどうなるの？

ペンギン先生

position-try-fallbacks というプロパティで自動的に候補位置を試してくれるよ。「上に表示→はみ出たら下→それでもダメなら左」みたいなフォールバックをCSSで記述できるんだよ。

ひよこ

Chrome以外のブラウザでも使えるの？

ペンギン先生

Chrome 125以降はフラグなしで使えるよ。SafariやFirefoxも追随して対応を進めていて、今は本番では段階的に使い始めるのがいい時期だね。Popper.jsを使っていたプロジェクトが少しずつ移行を始めているよ。

まとめ：ざっくりこれだけ覚えればOK！

「CSS Anchor Positioning」って出てきたら「CSSだけでツールチップ位置を要素に吸着させる新機能」と思えればだいたいOK！

📖 おまけ：英語の意味

「CSS Anchor Positioning」＝ CSSアンカー位置決め

💬 W3CのCSS Working Groupが策定。FloatingUIやPopper.jsが担っていた複雑な位置計算をCSSネイティブで実現しようという仕様だよ。