スクロールコンテナとアンカーポジショニング

デフォルトの挙動

コンテナをスクロールすると、その中のアンカーはコンテンツと一緒に動きます。デフォルトでは、アンカーされたターゲットもアンカーと一緒に動きます — フレームごとにアンカーの解決位置を追跡します。JavaScript不要です。

.scroll-container {
  height: 400px;
  overflow-y: auto;
}

.scroll-container .item {
  anchor-name: --item;
}

.tooltip {
  position: absolute;
  position-anchor: --item;
  position-area: top;
}

ユーザーがスクロールしてもツールチップはアイテムにくっついたままです。これが置き換える対象のJavaScriptライブラリに対する killer feature です — Floating UI と Popper はすべての祖先で scroll イベントを listen して再計算する必要があり、長いページで計測可能なコストがあります。アンカーポジショニングはレイアウトエンジンに組み込まれています。

ターゲットがスクロールコンテナから脱出すべきとき

スクロール可能なテーブル内の行にアンカーされたツールチップが、行が画面外にスクロールしても表示されたままにしたい場合があります。ターゲットに absolute の代わりに position: fixed を使ってください：

.tooltip {
  position: fixed;        /* overflow祖先から脱出 */
  position-anchor: --item;
  position-area: top;
}

これでツールチップはビューポート座標系で配置されますが、依然としてアンカーの解決位置を追跡します。アンカーが画面外にスクロールしても、ツールチップはビューポート端付近の最後の表示位置に留まります — または IntersectionObserver と組み合わせて、アンカーがビューポートを離れたらツールチップを隠せます。

スティッキーポジショニング

position: sticky は今日（2026年3月）アンカーポジショニングとうまく動きません。両システムは異なる方法で位置を計算し、相互作用は仕様化されていません。スティッキー挙動が必要なら、アンカーをstickyで配置しターゲットをabsoluteにする — ただしクセを覚悟してください。進捗は CSSWG issue 9852 で追跡できます。

パフォーマンス

アンカーポジショニングはスクロールフレームごとに再評価されます — それが望ましい挙動です — がコストはJavaScriptイベントハンドラではなくレイアウトに組み込まれています。100個のアンカードツールチップを持つ高速スクロールコンテナのページは、Floating UI で管理する同じページよりコストが低くなります。