CSSだけで「この位置に表示したい」が叶う、CSS Anchor Positioning API

「ボタンのすぐ下にツールチップを出したい」
「入力欄の横にエラーメッセージを出したい」

こういうUI、よく見かけますよね。でも、実装しようとすると意外と手間がかかりませんか？座標をとって、位置を計算して、微調整して……。そんな煩わしさをCSSだけで解決してくれるのが「CSS Anchor Positioning API」です。

CSS Anchor Positioning API ってなんぞや？

ざっくり言うと、「ある要素を基準にして、別の要素の位置をCSSだけでコントロールできる」仕組みです。名前が長いので、以降は「anchor-position」と記載します。

CSSで要素の位置をコントロールするといったら、 position: absolute が思い浮かびますよね。anchor-position は、この position: absolute をもっと便利に使うためのAPIである、というイメージです。

これまでのやり方では、最も近い position: relative などの定位された祖先要素を基準にしたものでしたが、anchor-position を利用した場合は全く別の場所にある要素を基準に他の要素を配置できるようになります。

anchor-positionの構成要素

anchor-name: 基準となる要素に付ける名前（ラベル）
anchor-default: 表示する要素が、どのアンカーを使うか指定
anchor() 関数: アンカー要素のどの位置を使うか指定（top / bottom / center など）

実際に書いてみると、こんな感じ。

<button anchor-name="info-btn">詳細</button>
<div anchor-default="info-btn" class="tooltip">
補足情報を表示します
</div>
<style>
.tooltip {
  position: absolute;
  top: anchor(bottom);
  left: anchor(center);
}
</style>

位置計算はすべてブラウザ側に任せられるのがポイントです。anchor-name が付与された任意の要素を参照でき、anchor-default によって明示的に「どの要素を基準にするか」を指定できます。

従来はどうしてたの？

anchor-position が存在していなかった頃は、このような「要素同士の相対位置」の制御は主にJavaScriptに頼っていました。

const btn = document.querySelector('#info-btn');
const popup = document.querySelector('#tooltip');
const rect = btn.getBoundingClientRect();

popup.style.top = `${rect.bottom}px`;
popup.style.left = `${rect.left}px`;

さらに、スクロールや画面サイズの変化に応じて再計算が必要だったりと、意外と大変な作業が。

anchor-position はどんな場面で使える？

この機能は、「特定の要素の近くに別の要素を表示する」という目的に対して、とてもスマートに使えるCSS機能です。特に、次のようなUIを実装したいときにぴったりです。

ボタンに対するツールチップや補足説明
入力欄のすぐ下に表示するカレンダーパネル
検索窓に連動した候補一覧のドロップダウン
入力フォームの近くに表示するエラーメッセージ
アイコンの上に表示される通知バッジやガイド表示

こういったケースでは、anchor-position を使うことで JavaScriptを使わず、CSSだけで自然な位置制御が実現できます。

一方で、次のようなケースでは少し注意が必要です

表示位置が頻繁に変化したり、動きのあるUI
アニメーションを伴う表示・非表示
モーダルやダイアログのように画面中央に固定表示したい要素
アンカー要素自体が動的に出入りする複雑なDOM構造

こうした場合は、JavaScriptやレイアウトライブラリとの併用が現実的です。

Popover APIとの組み合わせ

anchor-position は Popover API と一緒に使うことでさらに便利になります。Popover API は、HTML要素に popover 属性を付けることで、ネイティブなポップアップ挙動を簡単に実装できる機能です。

anchor-position がポップアップの位置を制御する一方で、Popover API は「表示／非表示の切り替え」や「キーボードによるアクセシビリティ制御」を担ってくれます。なので、組み合わせて使うことで「出す・消す・位置決め」までCSSで制御できるということです。

popovertarget=”…” と popovertargetaction=”toggle” で、ボタンなどからポップアップの表示を制御
popover 属性を付けることで、要素が自動的にポップアップとして振る舞い、ESCキーや外部クリックで閉じる
anchor-position を使って、ポップアップを任意の要素の近くに柔軟に配置

たとえば、「このボタンをクリックしたら、すぐ下に説明ボックスを表示し、ESCキーで閉じる」というUIが、HTMLとCSSだけで完結します。これにより、ちょっとした補助UIを追加するだけなら JavaScript に頼らずにすむケースが増え、UI実装がとても楽になります。

anchor-position のメリット

anchor-position には、実際の開発現場で役立つメリットがたくさんあります。

まず、JavaScriptによる座標計算が不要になるため、コードがスリムになり、保守性も向上します。スクロールやリサイズといったレイアウトの変化にも強く、ブラウザが自動で位置を調整してくれるのも大きな魅力です。

さらに、CSSだけで完結できるため、デザイナーやフロントエンドエンジニアがスタイル設計をより直感的に行えるようになります。

また先述のとおり、Popover APIと組み合わせることで、ポップアップの開閉やフォーカスの制御まで一貫してCSSで対応でき、より堅牢なUI構築が可能になります。

対応ブラウザとフォールバック

「これは便利そう！」と思った方も多いと思いますが、残念ながらまだ全てのブラウザで使えるわけではありません。例のごとく Can I use… してみましょう。

CSS Anchor Positioning

微妙な緑化具合ですね。

Chromeのバージョン125以降と、EdgeなどのChromiumベースブラウザでは利用可能。2025年5月現在、Firefoxとsafariではサポートされていません。実際のプロジェクトで扱う場合は、次のようなフォールバックを検討する必要があります。

方法１：未対応環境では従来通りJSで

<script>
if (CSS.supports('top: anchor(bottom)')) {
  // anchor-position が使える！
} else {
  // anchor-position が使ない！
  const trigger = document.getElementById('info-btn');
  const popup = document.getElementById('tip1');
  const rect = trigger.getBoundingClientRect();
  popup.style.top = `${rect.bottom}px`;
  popup.style.left = `${rect.left}px`;
}
</script>

方法２：CSS at-rule で分岐する

<style>
  @supports (top: anchor(bottom)) {
  }
</style>

方法３：Popper.jsなどのライブラリを活用

位置調整に特化したPopper.jsなども引き続き有効な選択肢です。

anchor-positionがもたらす新しいCSS設計のかたち

anchor-position ( CSS Anchor Positioning API ) は、Web UIの「ここに出現させたい」をCSSだけで自然に実現できる機能です。まだ一部ブラウザのみのサポートではありますが、導入できる環境ではとても強力な選択肢になります。

まずは、小さなUI（ツールチップやカレンダー表示など）から取り入れてみると、CSSの可能性がまた一歩広がるかもしれません。今後の標準化とブラウザ対応にも注目です。