CSS Reference

position-anchor

参照するアンカー要素を指定する

position-anchor プロパティは、要素を配置するのに使用する、既定のアンカー要素を指定します。

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

auto 要素が暗黙のアンカー要素を持つ場合、その要素と関連付けます。暗黙のアンカー要素がない場合は関連付けは行いません。（既定値）
<dashed-ident> 2つのダッシュ（ハイフン）から始まる識別子（<dashed-ident> データ型の値）で参照するアンカー要素の名前を指定します。

暗黙のアンカー要素

暗黙のアンカー要素とは、HTML の anchor 属性（ただし、現時点では非標準のため使用できません）によって関連付けられたアンカー要素のことです。また、擬似要素については、特に指定がない限り、元の要素と同じ暗黙のアンカー要素を持つと定義されています。

現時点においては暗黙のアンカー要素を使用せず、明示的にアンカー要素を指定することが望ましいでしょう。

具体的なサンプルソースコードは anchor-name プロパティの説明を参照してください。

anchor() 関数による参照

position-anchor プロパティを使用したアンカー要素との関連付け以外にも、anchor() 関数を使用してアンカー要素を参照する方法もあります。

.content{
  position: absolute;
  left: anchor(--exampleAnchor right, 20px);
}

position-anchorの仕様

初期値
  • auto
対象となる要素
  • 絶対位置ボックス
継承
  • なし

主要ブラウザの対応

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