ツールチップやドロップダウンを「基準要素（アンカー）」に紐付けて配置できる機能群です。anchor-nameで基準を宣言し、position-anchorとposition-areaで相対配置します。JSライブラリで行っていた位置計算をCSSだけで実現できます。
anchor-name: --name; / position-anchor: --name; / position-area: <area>; / anchor(<side>).trigger {
anchor-name: --menu-button;
}
.dropdown {
position: absolute;
position-anchor: --menu-button;
position-area: bottom center;
}ボタンの直下中央にドロップダウンを配置
.tooltip {
position: fixed;
position-anchor: --target;
bottom: anchor(top);
justify-self: anchor-center;
position-try-fallbacks: flip-block;
}対象の上に表示し、画面上端では自動で下に反転
popover属性と組み合わせると「クリックで開く・外側クリックで閉じる・最前面表示」まで含めてJSほぼゼロで実装できます。画面端での自動反転はposition-try-fallbacksが担当します。
anchor-nameの値はCSS変数と同じ--始まりの識別子です（--を忘れると無効）。またアンカー要素と配置要素が同じスタッキングコンテキスト条件を満たさないと参照できない場合があります。配置要素にはposition: absolute/fixedが必要です。
AIはツールチップ実装にFloating UI（Popper.js）やgetBoundingClientRect()でのJS位置計算を提案しがちですが、2026年からはCSSアンカーポジショニングがBaseline入りしています。AIの知識では「Chrome限定の実験的機能」と古い認識のことが多い点、またanchor-nameの--プレフィックスを落とす生成ミスに注意してください。
このPopper.js製ツールチップを、CSSアンカーポジショニング＋popover属性のJS最小実装に置き換えて
画面端で自動反転するドロップダウンメニューをposition-areaとposition-try-fallbacksで実装して
アンカーポジショニング非対応ブラウザ向けのフォールバックを@supportsで設計して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。