# アンカーポジショニング

> ツールチップやドロップダウンを「基準要素（アンカー）」に紐付けて配置できる機能群です。anchor-nameで基準を宣言し、position-anchorとposition-areaで相対配置します。JSライブラリで行っていた位置計算をCSSだけで実現できます。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/anchor-positioning/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/CSS_anchor_positioning

## 構文

```css
anchor-name: --name; / position-anchor: --name; / position-area: <area>; / anchor(<side>)
```

## ブラウザ対応

- Baseline 新しく利用可能（2026年1月に全主要ブラウザ対応）
- Chrome 125+ / Firefox 147+ / Safari 26+ / Edge 125+

## コード例

### 例1: ボタンの直下中央にドロップダウンを配置

```css
.trigger {
  anchor-name: --menu-button;
}

.dropdown {
  position: absolute;
  position-anchor: --menu-button;
  position-area: bottom center;
}
```

### 例2: 対象の上に表示し、画面上端では自動で下に反転

```css
.tooltip {
  position: fixed;
  position-anchor: --target;
  bottom: anchor(top);
  justify-self: anchor-center;
  position-try-fallbacks: flip-block;
}
```

## TIPS

popover属性と組み合わせると「クリックで開く・外側クリックで閉じる・最前面表示」まで含めてJSほぼゼロで実装できます。画面端での自動反転はposition-try-fallbacksが担当します。

## よくある間違い

anchor-nameの値はCSS変数と同じ--始まりの識別子です（--を忘れると無効）。またアンカー要素と配置要素が同じスタッキングコンテキスト条件を満たさないと参照できない場合があります。配置要素にはposition: absolute/fixedが必要です。

## AIがよく間違えるポイント

AIはツールチップ実装にFloating UI（Popper.js）やgetBoundingClientRect()でのJS位置計算を提案しがちですが、2026年からはCSSアンカーポジショニングがBaseline入りしています。AIの知識では「Chrome限定の実験的機能」と古い認識のことが多い点、またanchor-nameの--プレフィックスを落とす生成ミスに注意してください。

## AIへの依頼文例

- このPopper.js製ツールチップを、CSSアンカーポジショニング＋popover属性のJS最小実装に置き換えて
- 画面端で自動反転するドロップダウンメニューをposition-areaとposition-try-fallbacksで実装して
- アンカーポジショニング非対応ブラウザ向けのフォールバックを@supportsで設計して

## 関連プロパティ

- [position](https://www.css-dictionary.com/property/position.md)
- [inset](https://www.css-dictionary.com/property/inset.md)
- [z-index](https://www.css-dictionary.com/property/z-index.md)
- [inset-inline](https://www.css-dictionary.com/property/inset-inline.md)