はじめに

ウェブサイトやウェブアプリにおいて、ツールチップやドロップダウンメニューのように、ある要素を基準にして別の要素を配置したいという場面は多いのではないでしょうか。

たとえば、ボタンの下にドロップダウンメニューを出す、アイコンの横にツールチップを表示する、といったUIです。

position: relativeとposition: absoluteの組み合わせで単純な配置はCSSだけで実現できますが、HTMLの構造に縛られたり、表示領域からはみ出したりする場合に位置を切り替えるような実装ではJavaScriptが必要になることもありました。

CSS Anchor Positioningは、指定した要素（アンカー）の位置やサイズを基準に、別の要素を配置できる仕組みです。これを使えば、JavaScriptが必要だった位置調整も、CSSのみで実現できます。

• CSS Anchor Positioning | MDN
• CSS Anchor Positioning | W3C Working Draft

本シリーズでは、まずCSS Anchor Positioningの基本的な仕様を解説し、その後に実践的な実装例を取り上げていきます。

ブラウザのサポート状況

CSS Anchor Positioningのブラウザサポート状況は次のとおりです（2026年3月現在）。

• CSS Anchor Positioning | Can I use

すべての主要ブラウザで利用可能になっています。

@supportsでのサポート確認

前述のようにほとんどのブラウザが対応している状態ではありますが、念のため、対応していない古い環境向けに代替レイアウトを用意したい場合もあるでしょう。

CSSの@supportsルールを使えば、ブラウザがCSS Anchor Positioningに対応しているかどうかを確認できます。

@supports (anchor-name: --myanchor) {
  /* CSS Anchor Positioningに対応しているブラウザ向けのスタイル */
}

@supports not (anchor-name: --myanchor) {
  /* CSS Anchor Positioningに対応していないブラウザ向けのスタイル */
}

anchor-nameプロパティの指定が有効かどうかで、ブラウザの対応状況を判定できます。対応していないブラウザ向けのフォールバックを用意しておきたい場合に活用してください。

アンカー要素を基準にした位置指定

CSS Anchor Positioningでは、大きく分けて次の3つのステップで要素を配置します。

1. 基準となる要素をアンカー要素として定義する
2. 配置する要素を、アンカーと紐づける
3. anchor()関数を使って、アンカー要素の位置を基準に配置する

HTMLとCSSにすると、全体では次のようになります。

<!-- アンカー要素 -->
<div class="anchor">アンカー要素</div>
<!-- 配置する要素 -->
<div class="target">配置される要素</div>

.anchor {
  /* ステップ1：アンカー要素の定義 */
  anchor-name: --my-anchor;
}
.target {
  /* ステップ2：アンカーとの紐づけ */
  position: absolute;
  position-anchor: --my-anchor;
  /* ステップ3：アンカー要素の位置を基準に配置 */
  top: anchor(bottom);
}

このコードでは、アンカー要素の.anchorの下辺に.targetが配置されるようになっています。

では、これらのコードを順を追って見ていきましょう。

ステップ1：アンカー要素の定義

まず、基準となる要素にanchor-nameプロパティでアンカー名をつけます。

.anchor {
  /* ステップ1：アンカー要素の定義 */
  anchor-name: --my-anchor;
}

アンカー名は--で始まるカスタム識別子（<dashed-ident>）を使います。CSSカスタムプロパティと同じ形式です。ここでは--my-anchorというアンカー名にしました。

ステップ2：アンカーとの紐づけ

次に、配置する要素にposition-anchorプロパティで紐づけるアンカー名を指定します。配置する要素にはposition: absoluteまたはposition: fixedを指定しつつ、topプロパティやleftプロパティなどの位置指定プロパティを指定することになります。

.target {
  /* ステップ2：アンカーとの紐づけ */
  position: absolute;
  position-anchor: --my-anchor;
}

position-anchorプロパティを使わずに、anchor()関数で紐づけるアンカー名を指定する方法もありますが、後述します。

ステップ3：anchor()関数で位置を指定する

そして、anchor()関数を使って、アンカー要素のどの辺（へん）を基準にするかを指定します。

.target {
  /* ステップ2：アンカーとの紐づけ */
  position: absolute;
  position-anchor: --my-anchor;
  /* ステップ3：アンカー要素の位置を基準に配置 */
  top: anchor(bottom);
}

top: anchor(bottom)は、配置する要素.targetのtopの位置を、紐づいているアンカー要素の.anchorのbottomの位置を基準にする、という意味になります。

anchor()関数の詳細

anchor()関数の構文は次のようになっています。

anchor( <anchor-name>? && <anchor-side>, <length-percentage>? )

第一引数 <anchor-name>

<anchor-name>には、対象のアンカー名を指定します。position-anchorプロパティで対象のアンカーを指定済みであれば、anchor()関数の第一引数のアンカー名は省略できます。

先ほどのCSSのコードは、position-anchorプロパティで--my-anchorと紐づいているため、topプロパティで使用しているanchor()関数では、第一引数のアンカー名を省略しています。

anchor()関数の第一引数を省略せずに書く場合は、次のようになります。

.target {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

第二引数 <anchor-side>

<anchor-side>には、アンカー要素のどの辺を参照するかを指定します。主に使う値は次のとおりです。

アンカー要素の右側に配置したい場合は次のようになります。

.target {
  position: absolute;
  position-anchor: --my-anchor;
  top: anchor(top);
  left: anchor(right);
}

これは、配置する要素.targetのtopやleftの位置を、アンカー要素の.anchorの上辺（anchor(top)）と右辺（anchor(right)）に合わせています。

図解すると次のようになります。

さらにイメージしやすいように、実際に値を変えて試せる勘所をつかむためのデモを用意しました。

デモでは、.targetのプロパティと値を変更できる機能と、プリセットから配置する場所を選べるようにしてあります。アンカー要素の左上に配置するにはどういうプロパティと値にすればよいか？ などクイズ感覚で試してみるのもよいでしょう。

第三引数 <length-percentage>

<length-percentage>の部分は、anchor()関数が有効でない場合の代替の値となります。具体的な使い方は後述の「アンカー要素が見つからない場合の代替値」で解説します。

基本例：アンカーの右側に配置

基本はanchor(<anchor-side>)の形で使います。

<div class="anchor">アンカー要素</div>
<div class="target">配置される要素</div>

まずアンカー要素の.anchorにはanchor-nameでアンカー名を指定します。

.anchor {
  anchor-name: --my-anchor;
}
.target {
  position: absolute;
  position-anchor: --my-anchor;
  /* 基本：アンカーの右側に配置 */
  top: anchor(top);
  left: anchor(right);
}

calc()と組み合わせて位置を調整する

前節の例では、アンカーの右側にピッタリとくっついて配置されていました。少し離して配置したい場合は、calc()と組み合わせます。

配置する要素にmarginを指定する方法もありますが、anchor()は<length>値を返すため、calc()と組み合わせられます。

<div class="anchor">アンカー要素</div>
<div class="target">配置される要素</div>

.anchor {
  anchor-name: --my-anchor;
}
.target {
  position: absolute;
  position-anchor: --my-anchor;
  /* calc()と組み合わせてオフセットを加える */
  top: anchor(top);
  left: calc(anchor(right) + 10px);
}

calc()の中でanchor(right)（アンカー要素の右辺の位置）に任意の値を加えることで、アンカー要素の辺からさらにずらした位置を指定できます。

アンカー要素が見つからない場合の代替値

代替値を指定すれば、アンカーが見つからない場合（アンカー要素がdisplay: noneになっているなど）のフォールバックとして機能します。

たとえば次のコードでは、.anchorにdisplay: noneを指定してアンカー要素を意図的に非表示にしています。アンカー要素が見つからないため、anchor(top, 100px)の代替値100pxが使われ、top: 100pxとして配置されます。同様に、leftはcalc(100px + 10px)となり、left: 110pxの位置になります。デモではチェックボックスでアンカー要素の表示・非表示を切り替えられるので、代替値による配置に切り替わる様子を確認してみてください。

<div class="anchor">アンカー要素</div>
<div class="target">配置される要素</div>

.anchor {
  anchor-name: --my-anchor;
  /* 対象が見つからないようにわざと隠す */
  display: none;
}
.target {
  position: absolute;
  position-anchor: --my-anchor;
  /* 第二引数に代替値を指定する */
  top: anchor(top, 100px);
  left: calc(anchor(right, 100px) + 10px);
}

ここまでのまとめ

今回は、CSS Anchor Positioningの概要と、anchor()関数の基本的な使い方を解説しました。おさらいしておきましょう。

• CSS Anchor Positioningは、指定した要素（アンカー）の位置やサイズを基準に別の要素を配置できる仕組み
• すべての主要ブラウザで利用可能になっている（@supportsでのサポート確認も可能）
• anchor-nameプロパティで基準となるアンカー要素を定義する
  • アンカー名は--で始まるカスタム識別子を使う
• position-anchorプロパティで配置する要素をアンカーに紐づける
  • position: absoluteまたはposition: fixedが必要
• anchor()関数で、アンカー要素の辺を基準にした位置指定ができる
  • 例：top: anchor(bottom)でアンカーの下辺を基準に配置
  • calc()と組み合わせてオフセットを加えることも可能
  • 第三引数にはアンカーが見つからない場合の代替値を指定できる

次回は、anchor()関数を使ったツールチップの実装と、配置をよりシンプルに書けるposition-areaプロパティを解説します。