anchor-name
要素に名前を付け、ほかの要素をその位置に合わせて配置できるようにするプロパティ。 ドロップダウンやツールチップの位置をJavaScriptのライブラリで計算していた書き方を、CSSの指定に置き換えられます。
今の書き方
anchor-nameでボタンに名前を付け、メニューのposition-anchorでその名前を指定すると、メニューをボタンに合わせて置けます。
position-try-fallbacksを指定すると、画面の下に収まらないときは上に出します。
スクロールしても、位置はブラウザが合わせ続けます。
.menu-button {
anchor-name: --menu-button;
}
.menu {
position: fixed;
position-anchor: --menu-button;
position-area: bottom span-right;
position-try-fallbacks: flip-block;
margin-top: 4px;
}<div class="dropdown">
<button type="button" class="menu-button">メニュー</button>
<div class="menu">
<a href="/settings">設定</a>
<a href="/logout">ログアウト</a>
</div>
</div>以前の書き方
Popperなどのライブラリで、ボタンの位置を測り、メニューの位置を計算していました。 スクロールやリサイズのたびにJavaScriptで計算し直し、画面の下に収まらないときは上に出します。
Popper.createPopper(
document.querySelector('.menu-button'),
document.querySelector('.menu'),
{
placement: 'bottom-start',
modifiers: [{ name: 'offset', options: { offset: [0, 4] } }],
},
)<div class="dropdown">
<button type="button" class="menu-button">メニュー</button>
<div class="menu">
<a href="/settings">設定</a>
<a href="/logout">ログアウト</a>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2"></script>置き換えるときの注意点
position: absoluteだと、ページをスクロールしてメニューが画面の下からはみ出しても、上に出ません。 画面の端で反対側に出すときは、position: fixedにします。- 上に出たあとは、下に収まる余裕ができても、上に収まるあいだは上に出たままです。 Popperのように、下に収まればすぐに戻るわけではありません。
- 同じ名前を複数の要素に付けると、ソース順で最後の要素が使われます。
一覧の各項目にメニューを付けるような、くり返す部品では、すべてのメニューが最後のボタンに合わせて出ます。
部品を囲む
.dropdownにanchor-scope: --menu-buttonを指定し、名前が届く範囲を部品の中に限ります（anchor-scopeはChrome 131から）。 - ボタンが
display: noneなどで隠れていると、メニューはボタンに結び付きません。
関連するプロパティと関数
| プロパティ・関数 | 説明 |
|---|---|
position-area | アンカー要素の周りを3×3のマスに見立て、どのマスに置くかを指定します。 |
anchor() | top・leftなどの値に、アンカー要素の辺の位置を使います（例：top: anchor(bottom)）。position-areaより細かく位置を決めたいときに使います。 |
position-try-fallbacks | 収まらないときに試す位置を、順に指定します。 |
anchor-size() | アンカー要素の幅や高さを、widthなどの値に使います（例：メニューの幅をボタンにそろえる）。 |
anchor-scope | アンカーの名前が届く範囲を、指定した要素の中に限ります。 |
フォールバック
未対応のブラウザでは、position-anchorなどの指定が無視され、メニューがボタンに合わせて置かれません。
@supportsで分岐し、.dropdownを基準にして、メニューをボタンの下に出します。
画面の端で反対側に出すことはしませんが、メニューは表示され、操作もできます。
.dropdownの祖先にoverflow: hiddenがあると、メニューが切れることがあります。
@supports not (anchor-name: --a) {
.dropdown {
position: relative;
}
.menu {
position: absolute;
top: 100%;
left: 0;
}
}未対応のブラウザでも反対側に出すことが欠かせない場合は、Floating UI（Popperの後継）などのライブラリを使います。
Browser Support
Chrome
v125+2024-05-14Edge
v125+2024-05-17Safari
v26+2025-09-15Safari (iOS)
v26+2025-09-15Firefox
v147+2026-01-13