Anchor positioning | CSS Baseline Tour 2026

STEP 1

表のメニューが箱で切れる

表は、狭い画面で横にスクロールできるよう overflow-x: auto の箱に入れるのが一般的です。各行の「…」を押すとメニューが開きます。メニューは position: absolute でボタンの下に置いていますが、最後の行のメニューは箱の下端で切れ、箱の中のスクロールになってしまいます。

ファイル	更新日	サイズ	所有者
見積書.pdf	10月1日	120 KB	山田	…
議事録.docx	10月5日	240 KB	山田	…
予算.xlsx	10月8日	360 KB	山田	…

STEP 2

ボタンを基準に、最前面に出す

メニューを Popover にして、Anchor positioning でボタンの下に置きました。最後の行の「…」を押すと、メニューは箱の外まで切れずに表示されます。

ファイル	更新日	サイズ	所有者
見積書.pdf	10月1日	120 KB	山田
議事録.docx	10月5日	240 KB	山田
予算.xlsx	10月8日	360 KB	山田

使っている機能

popovertarget: ボタンで開いた Popover は、そのボタンが自動でアンカー（基準にする要素）になる
position-area: アンカーのどちら側に置くかを決める。bottom span-left は、アンカーの下に置き、右端をそろえて左へ広げる
anchor-name / position-anchor: Popover 以外の要素を配置するときは、アンカーに名前を付け、配置する要素からその名前を指定する

CSS

/* popovertarget で開いた Popover は、開いたボタンが自動でアンカーになる */
.anchor-popover {
	/* アンカーの下に置き、右端をそろえて左へ広げる */
	position-area: bottom span-left;
	margin: 4px 0 0;
}

HTML

<button type="button" class="anchor-menu-button" popovertarget="anchor-menu-1" aria-label="操作">…</button>
<ul id="anchor-menu-1" class="anchor-menu anchor-popover" popover>
	<li><button type="button">名前を変更</button></li>
	<li><button type="button">複製</button></li>
	<li><button type="button">削除</button></li>
</ul>