ツールチップやドロップダウンメニューの位置調整を、Pure CSSだけで実現する時代がついに到来している。2026年1月以降、CSS Anchor Positioningが最新のデバイスとブラウザで動作するようになり、これまでPopper.jsやFloating UIといったJavaScriptライブラリに依存していた制作現場にとって、新しい選択肢が広がっている。
ブラウザサポートが急速に拡大
CSS Anchor Positioningの最大の変化は、ブラウザサポートの進展だ。2025年9月にSafari 26でアンカーポジショニングがリリースされ、主要ブラウザ3社のうち2社がサポートする状況となった。FirefoxについてもNightly版でのテスト進展が印象的で、まもなく到着予定とされている。
これまでJavaScriptで複雑性とパフォーマンス問題を抱えていた実装が、CSS（とHTML）で宣言的に実現できるようになった意味は大きい。特に中小企業のウェブサイトでは、外部ライブラリへの依存を減らしつつ、パフォーマンスを向上させられる可能性がある。
基本的な仕組みと実装方法
CSS Anchor Positioningは、要素同士を紐づけて、アンカー要素のサイズと位置を基準に、アンカー配置要素のサイズと位置を設定できる機能を提供する。
基本的な実装は2ステップだ。まずアンカーとなる要素にanchor-nameプロパティでダッシュ付きの識別子を設定し、次に配置したい要素でposition-anchorプロパティを使ってアンカー名を指定する。
anchor()関数をinsetプロパティ値で使用することで、関連するアンカー要素のエッジ位置を基準とした長さ値を取得できる仕組みになっている。これまでのような座標計算をJavaScriptで行う必要がなくなり、ブラウザが自動的に位置を調整してくれる。
フォールバック機能と実用的な配慮
CSS Anchor Positioningの優れた点は、複数の代替位置をCSS単体で指定できる仕組みを提供していることだ。例えばツールチップがデフォルト位置で画面外にはみ出しそうな場合、ブラウザが自動的に別の提案位置で表示を試すか、必要に応じて完全に隠すかを選択できる。
ただし現在のブラウザ実装には課題もある。SafariとChromeで、配置要素が包含ブロックに対してどう調整されるかの動作が異なっている状況があり、実際のプロジェクトでは動作確認が重要になる。
またポップオーバー要素と組み合わせる場合、position-areaが設定されていればmargin: autoが無効化される仕様変更により、将来的にはより使いやすくなる予定だ。
制作現場での採用判断
実用性の観点では、CSS Anchor Positioningはブラウザネイティブの解決策として、配置要素を純粋なCSSでアンカー要素に紐づけ、スペース不足時の自動フォールバック位置まで対応している点が魅力だ。
ただし導入時期については慎重な判断が必要だろう。現状ではBaselineに近づいているものの、より多くの人々が試用する中で改善点やブラウザ間の違いが発見されている段階だ。特にFirefoxサポートが本格化するまでは、重要なUI要素での採用は段階的に進めるのが現実的かもしれない。
とはいえ長年Popper.jsやFloating UIが浮動要素配置の標準だった状況を考えると、将来的にはCSS Anchor Positioningがこれらの用途の多くを置き換えていく可能性は高い。制作効率とパフォーマンス向上の両面で、この技術の動向は注目しておきたいところだ。
