CSS Reference

anchor-name

配置のためのアンカー要素として宣言する

anchor-name プロパティは、要素を「アンカー要素」として宣言、その要素の主要なボックスを「アンカーボックス」に指定し、ターゲットとなる「アンカー名」をリストで与えます。これにより、他の要素から配置のためのアンカー要素として参照ができるようになります。

指定できる値は下記の通りです。

none 要素はアンカー要素とはなりません。（既定値）
<dashed-ident># 2つのダッシュ（ハイフン）から始まる識別子（<dashed-ident> データ型の値）のリストを指定できます。
もしその要素がプリンシパル・ボックス（Principal Box / 主ボックス）を生成する場合、その要素は「アンカー要素」となり、指定されたアンカー名のリストを持つようになります。要素がプリンシパル・ボックスを生成しない場合、このプロパティは効果を持ちません。

なお、anchor-name プロパティを指定した要素が display: none; や visibility:hidden; によって非表示になっている場合や content-visibility: hidden; によって「スキップされたコンテンツ」の中に含まれる場合、その要素はアンカー要素として認識されません。

具体的な利用方法

例えば下記のように2つの要素があったとします。

<div class="anchor">
  アンカーとする要素
</div>

<div class="content">
  アンカーを参照して配置したい要素
</div>

それぞれの要素に下記のようにスタイルを指定します。

.anchor {
  anchor-name: --exampleAnchor; /* アンカー要素として宣言 */
}

.content{
  position-anchor: --exampleAnchor; /* アンカー要素を参照 */
  position: fixed;
  left: anchor(right); /* 参照したアンカー要素からの相対値で配置（このボックスの左辺がアンカーボックスの右辺の位置になるように配置される） */
  top: anchor(top); /* 参照したアンカー要素からの相対値で配置（このボックスの上辺がアンカーボックスの上辺の位置になるように配置される） */
}

これにより、参照したアンカー要素のボックスを基準に要素を配置することが可能になります。また、参照するアンカー名を変更するだけで、別のアンカー要素を基準に要素を配置するといったことが可能です。

要素には、カンマ（,）で区切って、複数のアンカー名を指定することも可能です。

.anchor {
  anchor-name: --exampleAnchor01, --exampleAnchor02, --exampleAnchor03;
}

また、要素の配置には、top、right、bottom、left プロパティをはじめ、inset プロパティなども使用可能です。

.content{
  position-anchor: --exampleAnchor01;
  position: absolute;
  inset: 0 20px 20px 0;
}

あるいは、position-area プロパティを使用して、アンカー要素を中心として生成される 3×3 のグリッドを基準に要素を配置することも可能です。

.content{
  position-anchor: --exampleAnchor01;
  position: absolute;
  position-area: top span-all;
}

anchor-nameの仕様

初期値
  • none
対象となる要素
  • プリンシパル・ボックスを生成するすべての要素
継承
  • なし

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ×
Safari ×
iOS Safari ×
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome