CSS Anchor Positioningの使い方｜吹き出し追従デモとフォールバック

CSS Anchor Positioningは、ボタンなどのアンカーを基準に、吹き出しやメニューを配置する仕組みです。JavaScriptでgetBoundingClientRect()を繰り返し計算せず、アンカーの移動に追従させ、画面端では代替位置へ切り替えられます。

情報確認日：2026年8月20日

結論：配置はAnchor Positioning、開閉は別の仕組み

アンカーを動かして追従を確認する

最小コードを読む

1. 基準要素へanchor-nameを付ける

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

カスタム識別子は--から始めます。ページ全体で意味が衝突しない名前にします。

2. 吹き出しをアンカーへ結び付ける

.help-tip {
  position: absolute;
  position-anchor: --help-anchor;
  position-area: top center;
  margin-block-end: 0.5rem;
}

配置される側にはabsoluteまたはfixedのpositioningが必要です。position-areaなら、アンカーの上・下・左右といった領域を読みやすく指定できます。

anchor()で座標を細かく使う

既存のtopやleftへアンカーの辺を渡したい場合はanchor()を使います。

.help-tip {
  position: absolute;
  position-anchor: --help-anchor;
  left: anchor(center);
  bottom: calc(anchor(top) + 0.5rem);
  transform: translateX(-50%);
}

中央揃えや独自の距離計算には便利ですが、上下左右の単純配置ならposition-areaの方が意図を読み取りやすい場合があります。

画面端で代替位置へ切り替える

アンカーが画面上端にあると、上へ出した吹き出しが切れます。代替位置を宣言して、収まる配置をブラウザへ選ばせます。

.help-tip {
  position-area: top center;
  position-try-fallbacks: flip-block, flip-inline;
}

実際のUIでは、横書き・縦書き、ズーム、長い翻訳文、スクロール領域内、モバイルのソフトウェアキーボード表示まで確認します。位置が変わっても読み上げ順やフォーカス順はDOM順を基準に設計してください。

Popover APIとの組み合わせ

Anchor Positioningは位置決めの技術であり、アクセシブルなツールチップやメニューを自動生成するものではありません。表示目的に適したHTMLとAPIを先に選び、その配置へ使います。

未対応環境へ安全に対応する

基本のabsolute配置を先に書き、対応環境だけAnchor Positioningへ切り替えます。JavaScript位置計算ライブラリを既に使っている場合、対象ブラウザが満たされるまで一気に削除せず段階移行します。

.help-tip {
  position: absolute;
  inset: auto auto calc(100% + 0.5rem) 50%;
  transform: translateX(-50%);
}

@supports (anchor-name: --help-anchor) {
  .help-tip {
    position-anchor: --help-anchor;
    position-area: top center;
    inset: auto;
    transform: none;
  }
}

動かないときの確認順

1. 対象ブラウザがプロパティへ対応しているか
2. アンカー名が--で始まり、完全一致しているか
3. 配置対象がabsoluteまたはfixedになっているか
4. overflowで切られていないか、top layerが必要ではないか
5. 変形や書字方向を含む実レイアウトで再確認する

よくある質問

まとめ

CSS Anchor Positioningは、アンカーと配置対象を名前で結び、追従と画面端の代替配置を宣言する仕組みです。開閉や意味論とは分離し、基本配置のフォールバックを残したうえで、ツールチップやPopoverの位置決めへ段階導入してください。

関連記事

• CSS positionの使い方
• CSSレスポンシブWebデザインの基本
• CSS calc()の使い方

参照した公式資料

• MDN：CSS anchor positioning
• CSSWG：CSS Anchor Positioning