このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
position-area
Baseline 2026 *Newly available
Since January 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
position-area はCSS のプロパティで、アンカー位置指定された要素を、関連付けられたアンカー要素の端を基準に相対的に配置することを可能にします。これは、配置対象の要素を暗黙の 3x3 グリッドの 1 つ以上のタイル上に配置することで実現され、アンカー要素は中央セルとなります。
position-area は、インセットプロパティとanchor() 関数を用いて要素をアンカー要素に固定・配置する従来の方法に代わる便利な手段を提供します。このグリッドベースの概念は、配置された要素の包含ブロックの端を、デフォルトのアンカー要素の端に対して位置決めするという一般的な用途を解決します。
要素にデフォルトのアンカー要素が設定されていない場合、または絶対位置指定要素ではない場合、このプロパティは効果を持ちません。
メモ:このプロパティは当初、Chromium ブラウザーではinset-area という名前で、同じプロパティ値で使用されていました。下位互換性の目的で、しばらくの間両方のプロパティ名が対応されます。
構文
/* デフォルト値 */position-area: none;/* 単一の特定のタイルを定義する 2 つの <position-area> キーワード */position-area: top left;position-area: start end;position-area: block-start center;position-area: inline-start block-end;position-area: x-start y-end;position-area: center self-y-end;/* 2 つのタイルにまたがる <position-area> キーワード */position-area: top span-left;position-area: center span-start;position-area: inline-start span-block-end;position-area: y-start span-x-end;/* 3 つのタイルにまたがる <position-area> キーワード */position-area: top span-all;position-area: block-end span-all;position-area: self-x-start span-all;/* 暗黙の 2 番目の値を持つ単一の <position-area> キーワード */position-area: top; /* 評価結果: top span-all */position-area: inline-start; /* 評価結果: inline-start span-all */position-area: center; /* 評価結果: center center */position-area: span-all; /* 評価結果: center center */position-area: end; /* 評価結果: end end *//* グローバル値 */position-area: inherit;position-area: initial;position-area: revert;position-area: revert-layer;position-area: unset;値
このプロパティ値は 2 つの<position-area> キーワード、またはキーワードnone で構成されます。1 つの<position-area> キーワードのみが指定された場合、2 つ目のキーワードの意味を含みます。
<position-area>選択された位置指定要素を配置する位置指定領域グリッドの領域を指定します。
none位置指定領域が設定されません。
解説
position-area プロパティは、アンカーに対する要素の位置決めにおいてanchor() 関数の代替手段を提供します。position-area は、position-area グリッドと呼ばれる 3x3 のタイルグリッドの概念に基づいて動作し、アンカー要素は中央のタイルとなります。
グリッドのタイルは行と列に分割されています。
- 3 つの行は物理的な値である
top、center、bottomで表されます。また、等価な論理的な値であるblock-start、center、block-endや、座標の値であるy-start、center、y-endもあります。 - 3 つの列は、物理的な値である
left、center、rightで表現されます。これらは等価な論理的な値であるinline-start、center、inline-endや、座標の値であるx-start、center、x-endもあります。
アンカー要素の包含ブロックによって中央タイルの寸法が定義される一方、グリッドの外縁の寸法は位置指定要素の包含ブロックによって定義されます。
<position-area> の値は、1 つまたは 2 つのキーワードで構成され、位置指定要素が配置されるべきグリッドの領域を定義します。正確には、位置指定要素の包含ブロックがグリッド領域に設定されます。
例を示します。
- 行の値と列の値を指定することで、位置指定要素を単一の特定のグリッド枠に配置できます。例えば、
top left（論理的な値ではstart startに相当）やbottom center（論理的な値ではend centerに相当）を指定すると、位置指定要素は右上の枠または中央下の枠に配置されます。 - 行または列の値に加えて
span-*値を指定することで、2 つまたは 3 つのセルにまたがって配置することが可能です。最初の値は配置する要素を配置する行または列を指定し、初期状態では中央に配置されます。もう一方の値はその行または列の他のタイルをまたがる範囲を指定します。top span-leftは、位置指定要素を最上段の中央に配置し、その行の中央タイルと左タイルにまたがるようにします。block-end span-inline-endは、位置指定要素をブロックの末尾の行の中央に配置し、その行の中央タイルとインラインの末尾のタイルにまたがるようにします。bottom span-allおよびy-end span-allは、配置された要素を最下段の中央に配置し、3 つのセル（この場合、最下段の左、中央、右のタイル）にまたがるようにします。
アンカー機能の詳細、使用方法、およびposition-area プロパティについては、CSS アンカー位置指定モジュールのランディングページと、CSS アンカー位置指定の使用方法ガイド、特にposition-area の設定の節を参考にしてください。
調整されたデフォルトの動作
位置指定された要素に<position-area> 値が設定されると、その要素の特定のプロパティのデフォルト動作が調整され、適切なデフォルト配置が提供されます。
自己配置プロパティのnormal 値
normal の値を自己配置プロパティ（align-items、align-self、justify-items、justify-self など）に設定すると、start、end、anchor-center のいずれかとして動作します。自己配置プロパティのデフォルト値は、要素の配置方法によって異なります。
position-areaの値が軸内の中央領域を指定した場合、その軸におけるデフォルトの配置はanchor-centerです。- そうでない場合、その挙動は
position-areaプロパティで指定された領域とは逆になります。例えば、position-areaの値がその軸の先頭領域を指定している場合、その軸におけるデフォルトの配置はendとなります。
例えば、writing-mode がhorizontal-tb に設定されている場合、position-area: top span-x-start は配置された要素を最上段の中央に配置し、その行の中央タイルと開始タイルにまたがるようにします。この場合、自己配置プロパティはデフォルトでalign-self: end とjustify-self: anchor-center になります。
インセットプロパティと値
アンカー位置指定された要素がposition-area プロパティで位置指定された場合、インセットプロパティ（top やinset-inline-end など）は、位置領域からのオフセットを指定します。max-block-size: 100% のような他のプロパティ値も、位置領域を基準とします。インセットプロパティが設定されている場合、またはデフォルトでauto になっている場合は、その値が0 に設定されたかのように動作します。
位置指定要素の幅についての補足
配置された要素に特定のサイズが設定されていない場合、そのサイズはデフォルトで固有サイズになりますが、position-area グリッドのサイズの影響も受けます。
位置指定要素が単一で上の中央、下の中央、中央の中央セルに配置された場合、そのブロック方向のサイズはアンカー要素の包含ブロックサイズと同じになり、それぞれ上方向、下方向、または両方向に拡大します。配置された要素は指定されたグリッドセルに配置されますが、アンカー要素と同じ幅を採用します。ただし、そのコンテンツがはみ出すことはありません。最小のwidth はmin-content （最長の単語の幅によって定義される）となります。
位置指定要素が他の単一のグリッド区画（たとえばposition-area: top left）に配置された場合、または 2 つ以上のグリッド区画にまたがるように設定された場合（たとえばposition-area: bottom span-all）、指定されたグリッド領域に配置されますが、あたかもmax-content が設定されたかのように振る舞います。これは、position: fixed が設定された際に課されたサイズである、その包含ブロックのサイズに基づいてサイズが決められます。テキストコンテンツと同じ幅まで伸びますが、<body> の端によって制限される場合もあります。
position-area を使用してポップオーバーを配置
position-area を使用してポップオーバーを配置する場合、ポップオーバーのデフォルトスタイルが意図した配置と衝突する可能性があることに注意してください。主な原因はmargin とinset のデフォルトスタイルであるため、これらをリセットすることをお勧めします。
.my-popover { margin: 0; inset: auto;}CSS ワーキンググループは、この回避策を必要としない方法の検討を進めています。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | Positioned elements with adefault anchor element |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
position-area =
none|
<position-area>
<position-area> =
[left|center|right|span-left|span-right|x-start|x-end|span-x-start|span-x-end|self-x-start|self-x-end|span-self-x-start|span-self-x-end|span-all]||[top|center|bottom|span-top|span-bottom|y-start|y-end|span-y-start|span-y-end|self-y-start|self-y-end|span-self-y-start|span-self-y-end|span-all]|
[block-start|center|block-end|span-block-start|span-block-end|span-all]||[inline-start|center|inline-end|span-inline-start|span-inline-end|span-all]|
[self-block-start|center|self-block-end|span-self-block-start|span-self-block-end|span-all]||[self-inline-start|center|self-inline-end|span-self-inline-start|span-self-inline-end|span-all]|
[start|center|end|span-start|span-end|span-all]{1,2}|
[self-start|center|self-end|span-self-start|span-self-end|span-all]{1,2}
例
基本的な例
この例では、位置指定された要素がposition-area プロパティを使用して、関連付けられたアンカーに対して固定され、相対的に位置指定されています。
HTML
この HTML には<div> と<p> が含まれています。<p> は CSS で<div> を基準に相対位置指定されます。また、表示されるスタイルブロックも含まれます。すべての要素は、contenteditable 属性により直接編集可能に設定されています。
<div contenteditable="true">⚓︎</div><p contenteditable="true">編集可能です。</p><style contenteditable="true">.positionedElement { position-area: top center; }</style>CSS
<div> 要素をアンカー要素に変換し、anchor-name プロパティを設定します。次に、絶対位置指定された<p> 要素のposition-anchor 値を同じアンカー名に設定することで、両者を関連付けます。
position-area の初期値をtop center に設定します。この値はp セレクターに設定されるため、<style> ブロックの.positionedElementクラスセレクターに追加される値よりも詳細度が低くなります。その結果、スタイルブロック内でposition-area の値を設定することで、初期のposition-area の値を上書きできます。
.anchor { anchor-name: --infobox; background: palegoldenrod; font-size: 3em; width: fit-content; border: 1px solid goldenrod; margin: 100px auto;}p { position: absolute; position-anchor: --infobox; position-area: top center; margin: 0; background-color: darkkhaki; border: 1px solid darkolivegreen;}style { display: block; white-space: pre; font-family: monospace; background-color: #ededed; -webkit-user-modify: read-write-plaintext-only; line-height: 1.5; padding: 10px;}値
アンカー位置指定された要素内のテキスト量を変更して、どのように拡大するか確認してみてください。また、position-area プロパティの値をcenter など別の値に変更してみてください。
position-area 値の比較
このデモではアンカーを作成し、位置指定要素をそれに結びつけます。また、位置指定要素に適用する様々なposition-area 値を選択できるドロップダウンメニューを提供し、その効果を確認できます。オプションの一つを選択するとテキストフィールドが表示され、カスタム値を入力できるようになります。最後に、writing-mode: vertical-lr のオン/オフを切り替えるチェックボックスを用意し、書字方向が異なるときのposition-area 値の効果の違いを確認できるようにしています。
HTML
この HTML では、2 つの<div> 要素を指定します。1 つはanchor クラス、もう 1 つはinfobox クラスを付与します。これらはそれぞれアンカー要素と、それに紐付ける位置指定要素にするためのものです。両方にcontenteditable 属性を付与しているため、直接編集可能です。
また、<select> と<input type="text"> が異なるposition-area 値で設定されている 2 つのフォームがあり、<input type="checkbox"> で縦書きのwriting-mode のオン/オフを切り替えるようにしています。これらのコードと JavaScript は簡潔さを考慮して非表示にしています。
<div contenteditable>⚓︎</div><div> <p contenteditable>編集できます。</p></div><form> <div> <label for="position-area-select">position-area を選択:</label> <select name="position-area-select"> <optgroup label="Enter custom value"> <option>Custom</option> </optgroup> <optgroup label="Physical, single tile"> <option selected>top left</option> <option>bottom right</option> </optgroup> <optgroup label="Physical, span two"> <option>bottom span-right</option> <option>left span-top</option> </optgroup> <optgroup label="Physical, span all"> <option>top</option> <option>left</option> </optgroup> <optgroup label="Logical, single tile"> <option>start center</option> <option>inline-start block-end</option> </optgroup> <optgroup label="Logical, span two"> <option>start span-end</option> <option>center span-start</option> <option>inline-start span-block-end</option> <option>span-block-start center</option> </optgroup> <optgroup label="Logical, span all"> <option>start span-all</option> <option>block-end</option> </optgroup> <optgroup label="Coordinates, single tile"> <option>x-start center</option> <option>x-end y-end</option> </optgroup> <optgroup label="Coordinates, span two"> <option>center span-y-start</option> <option>y-start span-x-end</option> </optgroup> <optgroup label="Coordinates, span all"> <option>x-start span-all</option> <option>y-end</option> </optgroup> </select> </div> <div> <label for="position-area-custom">独自の position-area を入力:</label ><br /> <input type="text" name="position-area-custom" /> </div></form><form> <label for="writing-mode-checkbox">writing-mode: vertical-lr</label><br /> <input type="checkbox" name="writing-mode-checkbox" /></form>CSS
この CSS でanchor<div>をアンカー要素として宣言します。これはanchor-name でアンカー名を設定することにより行われます。
位置指定要素は、アンカー要素の名前を位置指定要素のposition-anchor プロパティの値として設定することで、アンカー要素に関連付けられます。また、position-area: top left で初期位置を指定します。これは<select> メニューから新しい値が選択されると上書きされます。最後に、opacity を0.8 に設定します。これにより、配置された要素にアンカー要素の上部に配置するposition-area 値が与えられた場合でも、要素同士の位置関係が視認可能になります。
.anchor { font-size: 1.8rem; text-align: center; color: white; text-shadow: 1px 1px 1px black; background-color: hsl(240 100% 75%); min-width: 50px; min-height: 50px; line-height: 50px; border-radius: 10px; border: 1px solid black; padding: 3px;}html { height: 100%;}body { margin: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;}form { background: white; border: 1px solid black; padding: 5px; position: fixed;}#position-area-form { top: 0; right: 2px;}#position-area-form div:last-child { margin-top: 10px;}#position-area-form div :last-child { margin-top: 5px;}#writing-mode-form { bottom: 0; left: 2px; writing-mode: horizontal-tb;}#position-area-custom-container { display: none;}.infobox { color: darkblue; background-color: azure; border: 1px solid #dddddd; padding: 5px 2px; border-radius: 5px; font-size: 1rem; box-sizing: border-box;}.anchor { anchor-name: --my-anchor;}.infobox { position-anchor: --my-anchor; position: fixed; opacity: 0.8; position-area: top left;}const anchorContainer = document.querySelector("body");const infobox = document.querySelector(".infobox");const positionAreaForm = document.querySelector("#position-area-form");const selectElem = document.querySelector("select");const inputElemContainer = document.querySelector( "#position-area-custom-container",);const inputElem = document.querySelector("#position-area-custom");const checkboxElem = document.querySelector("#writing-mode-checkbox");// Stop form from submitting when enter is pressed on itpositionAreaForm.addEventListener("submit", (e) => { e.preventDefault();});// Update positioned element position-area to value selected in drop-downselectElem.addEventListener("change", () => { const area = selectElem.value; if (area === "Custom") { // Show the custom value input field inputElemContainer.style.display = "block"; } else { // Hide the custom value input field inputElemContainer.style.display = "none"; // Set the position-area to the value chosen in the select box infobox.style.positionArea = area; }});// Update positioned element position-area to entered custom valueinputElem.addEventListener("change", () => { const customArea = inputElem.value; // Set the position-area to the value in the input box infobox.style.positionArea = customArea;});// Change writing-mode to match checkbox settingcheckboxElem.addEventListener("change", () => { if (checkboxElem.checked) { anchorContainer.style.writingMode = "vertical-lr"; } else { anchorContainer.style.writingMode = "horizontal-tb"; }});結果
結果は次のようになります。
<select> メニューから新しいposition-area 値を選択し、情報ボックスの配置に与える影響を確認してください。「カスタム」値を選択し、テキスト入力欄に任意のposition-area 値を入力して効果を確認しましょう。アンカーとアンカー配置要素にテキストを追加し、position-area 値に基づいてアンカー配置要素がどのように拡大するかを確認してください。最後に、チェックボックスをオンにした状態で、様々なposition-area 値を試してみてください。どの値が書字方向が変わっても変化せず、どの値が変化するかを確認しましょう。
仕様書
| Specification |
|---|
| CSS Anchor Positioning Module Level 1 # position-area |