このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
position-anchor
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
position-anchor はCSS のプロパティで、位置指定要素が関連付けられるアンカー要素（つまり、アンカー名がanchor-name プロパティをで設定された要素）のアンカー名を指定します。
構文
/* 単一の値 */position-anchor: auto;position-anchor: --anchor-name;/* グローバル値 */position-anchor: inherit;position-anchor: initial;position-anchor: revert;position-anchor: revert-layer;position-anchor: unset;値
auto位置指定要素を、暗黙のアンカー要素（存在する場合）に関連付けます。例えば、標準外の HTML の
anchor属性で設定されたものなどです。<dashed-ident>位置指定要素を関連付けるアンカー要素の名前。アンカー要素の
anchor-nameプロパティに掲載されているもの。これは既定のアンカー指定子として知られています。
解説
このプロパティは「位置指定された」要素のみに関連します。つまり、position がabsolute またはfixed に設定された要素や擬似要素です。
要素をアンカー要素に対して相対的に配置するには、位置指定要素に関連付け、位置、場所の 3 つの特性が必要です。position-anchor プロパティとanchor-name プロパティは、明示的な関連付けを提供します。
アンカー要素は、1 つ以上の<dashed-ident> アンカー名をanchor-name プロパティで設定できます。これらの名前のいずれかが、位置指定要素のposition-anchor プロパティの値として設定されると、両要素は関連付けられます。
position-anchor プロパティに記載されているアンカー名を持つアンカー要素が複数ある場合、位置指定要素はそのアンカー名を持つソース順序における最後のアンカー要素に関連付けられます。
位置指定要素をアンカーに固定するには、アンカー要素に対して相対的に配置しなければなりません。これにはアンカー位置指定機能（例:anchor() 関数（インセットプロパティの値として設定）やposition-area プロパティ）を使用します。
関連付けられたアンカーが非表示の場合（display: none やvisibility: hidden などによって）、または他の要素のスキップされたコンテンツの一部となっている場合（その要素にcontent-visibility: hidden が設定されている場合）、アンカー位置指定された要素は表示されません。
position-anchor プロパティは、位置指定されたすべての要素と、それに加えて擬似要素、例えば::before や::after などで対応しています。擬似要素は、特に指定しない限り、その擬似要素の元の要素と同じ要素に暗黙的にアンカーされます。
アンカー機能の詳細な情報とアンカーを使用する方法は、CSS アンカー位置指定モジュールのランディングページと、CSS アンカー位置指定の使用ガイドを参照してください。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | 絶対位置指定された要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
position-anchor =
auto|
<anchor-name>
<anchor-name> =
<dashed-ident>
例
anchor-name の基本使用法については基本的な使い方を、追加のposition-anchor の例については、それぞれの記事を参照してください。
スライダーのつまみをアンカーとして使用
この例では<output> が、範囲スライダーのつまみであるアンカーを基準に相対位置指定されています。
HTML
<input type="range"> 要素と<output> 要素を記載して、範囲の値を表示させます。<output> 要素に表示される値は、スライダーの値が変化するにつれて JavaScript を介して更新されます。
<label for="slider">値を変更してください:</label><input type="range" min="0" max="100" value="25" /><output>25</output>CSS
::-webkit-slider-thumb 擬似要素で表されるつまみに、--thumb というアンカー名を与えました。次に、その名前を<output> 要素のposition-anchor プロパティの値として設定し、position でfixed の値を指定します。これらの段階により、<output> がつまみと関連付けられました。
最後に、left およびtop プロパティにanchor() の値を使用して、<output> をつまみに対して相対的に位置指定します。
body { display: grid; place-items: center; height: 100vh; font-size: 1.4rem; font-family: sans-serif;}input { width: 33vw;}output { background: cyan; border: 2px solid darkblue; padding: 3px 6px; border-radius: 10px; font-size: 1.2rem;}input::-webkit-slider-thumb { anchor-name: --thumb;}output { position-anchor: --thumb; position: absolute; left: anchor(right); bottom: anchor(top);}JavaScript
<input> の値が変更された際に<output> 要素のコンテンツを更新するイベントリスナーを記述します。
const input = document.querySelector("input");const output = document.querySelector("output");input.addEventListener("input", (event) => { output.innerText = `${input.value}`;});結果
出力はつまみに固定されています。値を変更してください。 ブラウザーがアンカー位置指定に対応している場合、値はスライダー上の位置に関係なく、つまみの右上に表示されます。
複数の位置指定要素とアンカー
この例では、複数の位置指定要素を移動させ、それらを異なるアンカーに関連付けることができます。この例は、アンカーが複数の位置指定要素に関連付けられる方法を示していますが、アンカー位置指定要素は一度に単一のアンカー（anchor-position プロパティで定義されるアンカー）にしか関連付けられません。
HTML
アンカーが 4 つの要素と、異なるid 値で判別される位置指定要素が 2 つあります。位置指定要素には<select> ボックスが含まれており、これを使ってどのアンカーに関連付けるかを選択できます。
<div> <div>⚓︎</div> <div>⚓︎</div> <div>⚓︎</div> <div>⚓︎</div></div><div> <form> <label for="anchor1-anchor-select">情報ボックスの配置先:</label> <select> <option value="1">アンカー 1</option> <option value="2">アンカー 2</option> <option value="3">アンカー 3</option> <option value="4">アンカー 4</option> </select> </form></div><div> <form> <label for="anchor2-anchor-select">情報ボックスの配置先:</label> <select> <option value="1">アンカー 1</option> <option value="2">アンカー 2</option> <option value="3">アンカー 3</option> <option value="4">アンカー 4</option> </select> </form></div>CSS
最初にanchor<div> をアンカーとして宣言するために、anchor-name プロパティを使用します。このプロパティには、カンマ区切りで複数のアンカー名が指定され、それぞれの位置指定要素に対応します。これがデモの初期状態です。両方の位置指定要素が最初のアンカーに固定されます。
body { height: 100vh;}#anchor-container { display: grid; height: 100%; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr 1fr; justify-items: center; align-items: center;}.anchor { font-size: 1.8rem; color: white; text-shadow: 1px 1px 1px black; background-color: hsl(240 100% 75%); width: fit-content; border-radius: 10px; border: 1px solid black; padding: 3px;}#anchor1 { anchor-name: --my-anchor1, --my-anchor2;}それぞれの位置指定要素には、 2 つのアンカー名のいずれかと一致する値を持つposition-anchor プロパティが指定されます。その後、位置指定要素には、インセット、配置、マージンプロパティの組み合わせを用いて、アンカー相対的な位置指定情報が行われます。
.infobox { color: darkblue; background-color: azure; border: 1px solid #dddddd; padding: 10px; border-radius: 10px; font-size: 1rem; width: 120px;}#infobox1 { position-anchor: --my-anchor1; position: fixed; left: anchor(right); align-self: anchor-center; margin-left: 10px;}#infobox2 { position-anchor: --my-anchor2; position: fixed; bottom: anchor(top); justify-self: anchor-center; margin-bottom: 15px;}JavaScript
位置指定要素の<select>メニューで異なるアンカーが選択さ れたことを受けて、anchor-name の値が設定されるアンカー要素を動的に変更します。ここでの主要な機能は、change イベントハンドラーであるupdateAnchorNames() です。 2 つの<select> メニューで選択されたアンカー名が同じ場合、両方のアンカー名を 1 つのアンカーに設定します。そうでない場合、2 つの別個のアンカーに適切な単一のアンカー名を設定します。
// 2 つの select メニューへの参照を取得const select1 = document.querySelector("#anchor1-anchor-select");const select2 = document.querySelector("#anchor2-anchor-select");// すべてのアンカーへの参照を NodeList （配列風のもの）に格納するconst anchors = document.querySelectorAll("#anchor-container > div");// 両方の選択メニューに同じ change イベントハンドラーを設定するselect1.addEventListener("change", updateAnchorNames);select2.addEventListener("change", updateAnchorNames);function updateAnchorNames() { // すべてのアンカーからすべてのアンカー名が除去 for (const anchor of anchors) { anchor.style.anchorName = "none"; } // 選択メニューの値を数値に変換し、1 つ除去されるようにして // NodeList 内の選択されたアンカーのインデックス位置と一致する const value1 = Number(select1.value) - 1; const value2 = Number(select2.value) - 1; if (value1 === value2) { // 選択されたアンカーが両方とも同じ場合、 // 両方のアンカー名を同じアンカーに設定する anchors[value1].style.anchorName = "--my-anchor1, --my-anchor2"; } else { // 同じでない場合は、それぞれの選択されたアンカーで // アンカー名を個別に設定 anchors[value1].style.anchorName = "--my-anchor1"; anchors[value2].style.anchorName = "--my-anchor2"; }}結果
ドロップダウンメニューから様々な値を選択すると、要素が相対的に配置されるアンカーが変更されます。
仕様書
| Specification |
|---|
| CSS Anchor Positioning # position-anchor |
ブラウザーの互換性
関連情報
anchor-name- HTML の
anchor属性 - CSS アンカー位置指定モジュール
- CSS アンカー位置指定の使用ガイド