CSS Reference

anchor()

アンカー要素の辺を基準に配置する

anchor() 関数は、アンカーに関連付けられた要素を、ターゲットとなるアンカー要素の辺を基準として配置するためのCSS関数です。

anchor() 関数の基本的な構文は下記のようになります。

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

<anchor-name>

ターゲットとなるアンカー要素の名前を指定します。anchor-name プロパティで指定したアンカー要素の名前を指定します。指定が省略された場合、その要素の既定のアンカー（position-anchor プロパティで指定されているアンカー要素）が使用されます。

<anchor-side>

ターゲットとなるアンカー要素の、対応する辺の位置を指定します。

<anchor-side> として指定可能な値、およびキーワードは下記の通りです。

<anchor-side> = inside | outside
       | top | left | right | bottom
       | start | end | self-start | self-end
       | <percentage> | center

inside、outside キーワードは、要素の配置に使用される inset プロパティ（inset-block や inset-inline など）に応じて、アンカーボックスの一方の辺に解決されます。inside は inset プロパティ同様、アンカーボックスの内側位置を指し、outside は逆の外側を指します。

top、right、bottom、left の各キーワードは、アンカーボックスの指定された辺を指します。

start、end、self-start、self-end の各キーワードは、要素の配置に使用される inset プロパティ（inset-block や inset-inline など）と同じ軸のアンカーボックスの一方の辺を指します。

self-start と self-end は位置指定されたボックスの書字モードに基づき、start と end は位置指定されたボックスを包含するブロックの書字モードに基づいて解決されます。

<percentage> 値と center キーワードは、start と end の間にある位置を割合で指定します。0% は start に、100% は end に相当します。center は 50% に相当します。

<length-percentage>

カンマ（,）に続けて記述する <length-percentage> 値は、要素が位置指定されていない場合や、ターゲットとなるアンカー要素が存在しない場合に、フォールバックとして使用する距離です。

calc() 関数内での使用

anchor() 関数は、calc() 関数内でも使用できるため、例えば下記のように、アンカー要素の辺を基準にしながら、そこから 20px ずらす、といった指定も可能です。

.sample {
  right: calc(anchor(left) + 20px);
  position-anchor: --exampleAnchor;
  position: fixed;
}

関連項目

anchor-size() 関数の解説も合わせて参照してください。

anchor()のサンプルソース

.content {
  position-anchor: --exampleAnchor;
  position: fixed;
  inset-block-start: anchor(end);
  inset-inline-start: anchor(self-end);
  margin: 0.25rem 0 0 0.25rem;
}

主要ブラウザの対応

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

関連するCSS関数

仕様書

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

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

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

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

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