CSS Anchor Positioningが便利！ ツールチップやメニュー配置をすっきり書く方法

導入

ツールチップやドロップダウンの位置合わせは、ちょっとしたUIなのに意外と手間がかかります。ボタンの位置を測って、画面端ではみ出さないように調整して、ときには専用ライブラリまで入れることもありました。

そんな場面で気になってくるのが、CSSのanchor positioningです。基準になる要素を決めておけば、「このボタンの下に置く」「入力欄の右側に寄せる」といった配置をCSSだけでかなり素直に書けます。

まだ新しめの機能ではあるものの、管理画面や対応ブラウザを絞れる案件では試す価値が十分あります。この記事では、基本の書き方から、実務で使いやすい補助パネルやメニューへの応用までをやさしく整理します。

CSS Anchor Positioningとは

anchor positioningは、ある要素を基準にして、別の要素の表示位置を決めるためのCSS機能です。基準になる要素にanchor-nameを付け、配置したい要素側でそのアンカーを参照します。

今の書き方では、position-areaを組み合わせるのが分かりやすいポイントです。たとえば「アンカーの下中央」「右上」「左下」といった位置を、感覚的に指定できます。

これまで同じことをやろうとすると、JavaScriptでgetBoundingClientRect()を使ったり、外部ライブラリの座標計算に頼ったりしがちでした。anchor positioningなら、まず置きたい場所をCSSでそのまま表現できるのが魅力です。

まずは基本の書き方から

最初は、ボタンの下にシンプルなメニューを表示する例です。構造自体はよくあるUIですが、配置のためのJavaScriptを書かずに済むのがポイントです。

<div class="menu-wrap">
  <button class="menu-button">表示オプション</button>

  <div class="menu-panel">
    <button>名前順</button>
    <button>更新日順</button>
    <button>未読のみ</button>
  </div>
</div>
HTML
.menu-button {
  anchor-name: --menu-anchor;
}

.menu-panel {
  position: absolute;
  position-anchor: --menu-anchor;
  position-area: bottom center;

  margin-top: 8px;
  min-inline-size: 180px;
  padding: 8px;
  border: 1px solid #d0d7de;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}
CSS

このコードで見ておきたいポイントは3つです。

  • 基準にしたい要素へanchor-nameを付ける
  • 配置したい要素でposition-anchorを参照する
  • どこに置くかをposition-areaで指定する

この例では、.menu-buttonを基準にして、.menu-panelを下方向へ配置しています。書いていることがかなりそのまま読めるので、あとから見返したときも意図を追いやすいのがうれしいところです。

こういう場面で使いやすい

実務でまず相性がいいのは、次のようなUIです。

  • フォームの補助説明
  • テーブルヘッダーのフィルターメニュー
  • アイコンボタンに紐づくツールチップ
  • カード上の簡易アクションメニュー

どれも「ある要素の近くに、別の小さなUIを出したい」という共通点があります。逆に、複雑な衝突回避やアニメーション込みの高度な位置制御が必要なときは、今でも専用ライブラリのほうが安心です。

実務で便利な応用例

ここからは、入力欄の横に補助パネルを出しつつ、置けなければ下側へ回す例を見てみます。画面が狭いときの逃がし先までCSSで持てると、ぐっと実戦向きになります。

<label class="field">
  <span>表示名</span>
  <input class="field-input" type="text" />

  <aside class="field-help">
    24文字以内。公開プロフィールに表示されます。
  </aside>
</label>
HTML
.field {
  display: grid;
  gap: 8px;
  max-inline-size: 320px;
}

.field-input {
  anchor-name: --field-input;
}

.field-help {
  position: absolute;
  position-anchor: --field-input;
  position-area: right span-top;
  position-try-fallbacks:
    right center,
    bottom center,
    top center;

  max-inline-size: 220px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1f2937;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
CSS

このコードの良いところは、JavaScriptで位置計算を書かなくても、「まずは右」「無理なら下」「さらに厳しければ上」といった候補をCSSだけで並べられることです。

たとえばフォームの補助UIは、横幅に余裕があるときは右に出したくても、スマホや狭いカラムでは下に回したいことがあります。そうした判断をスタイル側で持てるのはかなり扱いやすいです。

popover属性と組み合わせると、開閉はHTMLの仕組みに寄せつつ、配置だけをCSSで組み立てる流れにも持っていけます。JavaScriptの役割を少しずつ減らしたい場面と相性がよさそうです。

注意点

  • 対応ブラウザは必ず確認する
    position-areaはまだ新しい機能です。2026年3月30日時点では、対応状況を前提に使う機能として考えるのが安全です。幅広いブラウザ対応が必要な案件では、従来どおりライブラリやフォールバックも検討したいところです。
  • 画面端でのはみ出しは検証しておく
    position-try-fallbacksでかなり吸収できますが、狭いレイアウトや複雑なスクロールコンテナでは崩れ方を実機で見ておいたほうが安心です。
  • 絶対配置の文脈は意識する
    position: absoluteを使う都合上、既存レイアウトや重なり順との相性は確認が必要です。z-indexの整理も一緒にやっておくと、後から困りにくくなります。
  • 何でも置き換えられるわけではない
    高機能なフリップ処理や複雑な衝突回避、細かなカスタム制御まで必要なら、Floating UIのような専用ライブラリのほうがまだ安定です。

まとめ

anchor positioningは、「ある要素のそばに別の要素を置く」というUIにかなり素直にはまるCSS機能です。単純なメニューや補助パネルであれば、JavaScriptの位置計算を書く量をかなり減らせます。

すぐにすべての案件で使える段階ではありませんが、管理画面や社内UIのように対応ブラウザを絞れる場面では、かなり試しやすい選択肢になってきました。まずはツールチップやフィルターメニューのような、小さく導入しやすいUIから触ってみるのがよさそうです。

今回の実務ポイント

  • 位置合わせのためだけのJavaScriptを減らしたい場面で特に効く
  • まずはツールチップや補助パネルのような小さなUIから試しやすい
  • 幅広いブラウザ対応が必要な案件では、導入前の確認が必須

参考リンク

read next