【CSS】CSS Anchor Positioning について

State of CSS 2024 にあった CSS Anchor Positioning について調べた

developer.chrome.com

CSS Anchor Positioningは、CSSの新しいレイアウト機能で、要素を特定の「アンカー」に基づいて配置することができる

主な用途

• ツールチップやポップオーバーの動的配置
• 特定の要素に基づいたモーダルやドロップダウンメニューの配置

実装方法

1. アンカーとなる要素を定義
   anchor-nameを設定して、参照される要素を定義する

2. アンカーを基準にする要素を配置
   position: absoluteとposition-anchorを使って、基準となる要素を指定

基本的な構文

<button class="button" style="anchor-name: --btn-anchor;">
  ボタン
</button>

<div class="tooltip" style="
  position: absolute;
  position-anchor: --btn-anchor;
  bottom: anchor(top);
  justify-self: anchor-center;
">
  ツールチップ
</div>

top, bottom, left, rightにアンカーを基準として要素の配置を指定することができる

anchor-size()で要素のサイズを指定ができる

anchor-size() 関数は、アンカーのサイズ（幅、高さ、インライン サイズ、ブロックサイズ）に基づいて、アンカー ポジショニングされた要素のサイズや位置を指定できる

例

.tooltip {
  position-anchor:  --btn-anchor;
  max-height: calc(anchor-size(height) * 2);
}

アンカーの位置によっては指定した配置ではツールチップが見切れることがある、そういう時@position-tryを使うと良いそうだが、それは別の機会にまとめる