1. はじめに
このセクションは規範ではありません。
CSSのレイアウトアルゴリズムは、デフォルトで ボックス同士のサイズと位置を調整し、 重なりが発生しないように配置します。
この仕様では、必要に応じてこうした前提を破り、 要素を他のコンテンツと重ねて表示できるようにするいくつかの方法を定義します：
-
相対配置：ボックスをレイアウト位置から視覚的にずらします。
-
固定配置：ボックスをレイアウト位置から視覚的にずらし、 スクロール可能な祖先によって本来見えなくなる場合でも、見える状態を保ちます。
-
固定位置配置：ボックスを絶対配置し、 ビューポートやページ枠に固定することで常に表示されます。
これらの配置方式は、 positionプロパティやinsetプロパティで制御されます。 非常に強力ですが、誤用しやすいものです。 適切に使えば標準のレイアウト規則で実現できない有用なレイアウトが可能ですが、 不適切に使うとコンテンツが重なり合い利用不能なページになることもあります。
1.1. モジュールの相互作用
このモジュールは、配置方式の機能を [CSS2]の以下のセクションで定義されている内容を置き換え・拡張します：
- 9.1.2 包含ブロック
- 9.3 配置方式
- 9.4.3 相対配置
- 9.6 絶対配置
- 9.7 display・position・floatの関係
- 9.8 通常フロー・フロート・絶対配置の比較
- 10.1 「包含ブロック」の定義
- 10.3.7 絶対配置・非置換要素
- 10.3.8 絶対配置・置換要素
- 10.6.4 絶対配置・非置換要素
- 10.6.5 絶対配置・置換要素
また、inset*プロパティ定義についても[CSS-LOGICAL-1]（CSS Logical Properties 1 § 4.3 フロー相対オフセット：inset-block-start, inset-block-end, inset-inline-start, inset-inline-endプロパティとinset-block, inset-inline, insetのショートハンド）の内容を置き換え・上書きします。
1.2. 値の定義
この仕様は、CSSプロパティ定義規約（[CSS2]）と、 値定義構文（[CSS-VALUES-3]）を採用しています。 本仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールと組み合わせることで、これらの値型の定義が拡張される場合もあります。
各プロパティ定義に記載された値に加えて、 本仕様で定義される全てのプロパティは CSS全域キーワードも値として受け付けます。 読みやすさのため繰り返し記載していません。
2. 配置方式の選択: positionプロパティ
| 名前: | position |
|---|---|
| 値: | static | relative | absolute | sticky | fixed |
| 初期値: | static |
| 適用対象: | table-column-groupおよびtable-column以外のすべての要素 |
| 継承: | no |
| パーセンテージ: | N/A |
| 算出値: | 指定キーワード |
| 正規順序: | 文法通り |
| アニメーション型: | 離散的 |
positionプロパティは、どの配置方式で ボックスの位置を計算するかを決定します。 static以外の値は、そのボックスを配置ボックスとし、 子孫用の絶対配置包含ブロックを確立します。 各値の意味は以下の通りです：
- static
- ボックスは配置ボックスではなく、 親整形コンテキストの規則でレイアウトされます。 insetプロパティは適用されません。
- relative
- ボックスはstaticと同様にレイアウトされ、 その位置からオフセットされます。 このオフセットは純粋に視覚効果であり、 特に指定がない限り、 非子孫ボックスのサイズや位置には影響しません（ただし、祖先のスクロール可能オーバーフロー領域が拡大される場合は除く）。 この配置方式は 相対配置と呼ばれます。
- sticky
- relativeと同じですが、 オフセットが最も近い祖先スクロールコンテナの スクロールポート（insetプロパティで修正される）を基準に自動調整されます。 insetプロパティが両方ともautoでない軸にて、 ユーザーがスクロールしてもボックスがその包含ブロック内で見えるようにします。 この配置方式は 固定配置と呼ばれます。
- absolute
-
ボックスはフロー外とされ、兄弟や祖先のサイズ・位置には影響しません。
親の整形コンテキストにも参加しません。
代わりに、ボックスは自身の絶対配置包含ブロック（insetプロパティで修正される）基準で配置・サイズ指定されます。 詳細は§ 4 絶対配置レイアウトモデル参照。 フロー内のコンテンツや他の絶対配置要素と重なることがあります。 また、ボックスが生成するスクロール可能オーバーフロー領域にも含まれます。 この配置方式は 絶対配置と呼ばれます。
- fixed
- absoluteと同様ですが、 ボックスが固定配置包含ブロック（通常はビューポート（連続メディアの場合）、またはページ領域（ページメディアの場合））基準で配置・サイズ指定されます。 ボックスの位置はこの基準矩形に対して固定されます。 ビューポート基準の場合はドキュメントをスクロールしても動かず、 ページ領域基準の場合は印刷時に各ページで複製されます。 この配置方式は 固定位置配置と呼ばれ、絶対配置のサブセットとみなされます。
positionの値が absoluteまたは fixed の場合、 ボックスはブロック化され、 floatは noneに計算され、 ボックスは独立したフォーマッティング・コンテキストを確立します。
2.1. 配置ボックスの包含ブロック
包含ブロックは、static、relative、またはstickyのボックスの場合は、その整形コンテキストにより定義されます。 fixedおよびabsoluteのボックスの場合は、次の通りです：
- ボックスがposition: absoluteの場合：
-
包含ブロックは、最も近い祖先ボックスで
絶対配置包含ブロックを確立するボックスによって、
次の方法で確立されます：
- 祖先がインラインボックスでない場合
- 包含ブロックは、祖先のパディングエッジによって形成されます。 ただし他に指定がある場合はその限りではありません （例：CSS Grid Layout 1 § 9.1 グリッドコンテナを包含ブロックとする場合参照）。
- 祖先がインラインボックスの場合、 そのボックスの書字モードを用いると、
-
包含ブロックは、祖先の最初のボックス断片の両軸における開始側の内容エッジから、
各軸の終了側の内容エッジまでの
ボックス断片の矩形で形成されます。
同じ行に複数の断片がある場合
（例：双方向並び替えによる）、
開始側の断片を最初の断片とします。
ボックスが複数行に断片化される場合、何が有用な包含ブロックか？ [Issue #8284]
祖先がいずれも包含ブロックを確立しない場合、 絶対配置包含ブロックは 初期包含ブロックになります。
注: ボックスが絶対配置包含ブロックを確立する要因となるプロパティには、 position、 transform、 will-change、 containなどがあります。
- ボックスがposition: fixedの場合：
-
包含ブロックは、最も近い祖先ボックスで
固定配置包含ブロックを確立するボックスによって形成され、
その境界は絶対配置包含ブロックと同じ方法で決定されます。
Note: ボックスが 固定位置決めの包含ブロック を確立する可能性があるプロパティには、 transform、 will-change、 containなどがあります。
もし先祖のいずれもそれを確立しない場合、 ボックスの固定位置決めの包含ブロックは 初期固定包含ブロックとなります：
-
連続メディアの場合、 レイアウトビューポート （サイズは動的ビューポートサイズと一致）です。 この結果、fixedボックスは文書のスクロール時に移動しません。
Note: この点で、 固定背景画像 (background-attachment: fixed) と似ています。
-
ページメディアの場合、 各ページのページ領域です。 固定配置された ボックスはすべてのページに複製されます。 （それらはページボックスに対してのみ固定されており、 ビューポート越しに見ても影響は受けません。 例えばプリントプレビューの場合など。）
Note: この結果、 固定配置されたボックスの一部が レイアウトビューポートや ページ領域の外側にはみ出した場合、 スクロールしてもそこには到達できず、印刷もされません。
初期固定包含ブロックは、 初期包含ブロックの 包含ブロックチェーンにおける親です。
-
配置がない場合、次の文書の包含ブロック（C.B.）は：
<!DOCTYPE html> < html > < head > < title > Illustration of containing blocks</ title > </ head > < body id = "body" > < div id = "div1" > < p id = "p1" > This is text in the first paragraph...</ p > < p id = "p2" > This is text< em id = "em1" > in the< strong id = "strong1" > second</ strong > paragraph.</ em ></ p > </ div > </ body > </ html >
次のように確立されます：
| 生成元ボックス | C.B.の確立元 |
|---|---|
| html | 初期C.B.（UA依存） |
| body | html |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
「div1」を配置した場合：
#div1{ position : absolute; left : 50 px ; top : 50 px }
その包含ブロックは「body」ではなく、初期包含ブロックになります（他に配置された祖先ボックスがないため）。
さらに「em1」も配置した場合：
#div1{ position : absolute; left : 50 px ; top : 50 px } #em1{ position : absolute; left : 100 px ; top : 100 px }
包含ブロックの表は次のようになります：
| 生成元ボックス | C.B.の確立元 |
|---|---|
| html | 初期C.B.（UA依存） |
| body | html |
| div1 | 初期C.B. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
「em1」を配置することで、その包含ブロックは最も近い配置された祖先ボックス（「div1」生成ボックス）になります。
2.1.1. 包含ブロックのさらなる調整
いくつかの機能は、包含ブロックの矩形を 絶対配置ボックスについて変更可能です。 これらは以下の順序で適用され、前段階の変更が後段階の包含ブロックに反映されます：
-
grid-placementプロパティは、絶対配置ボックスの包含ブロックがグリッドコンテナによって生成されている場合、 包含ブロックの矩形を指定されたグリッドエリアに変更できます。 CSS Grid Layout 1 § 9.1 グリッドコンテナを包含ブロックとする場合参照。
-
position-areaおよびposition-tryプロパティは、 包含ブロックの矩形を position-areaグリッドの指定領域に変更できます。 CSS Anchor Positioning § 3.1 position-areaプロパティ参照。
要素の元の包含ブロックは、これらの効果を適用する前の包含ブロックです。
2.2. 描画順序と積み重ねコンテキスト
z-index プロパティはすべての配置ボックスに適用されます。 z-indexがautoの場合：
-
fixedおよびstickyの配置ボックスは 積み重ねコンテキスト（stacking context）を形成します。
-
relativeおよびabsoluteの配置ボックスは 積み重ねコンテキスト（stacking context）を形成しませんが、 それらの要素が新たに積み重ねコンテキストを生成したかのように描画されます。 ただし、その配置された子孫や子の積み重ねコンテキストは 現在の積み重ねコンテキストに参加します。
注: ルート要素は 常に積み重ねコンテキスト（stacking context）を形成します。
詳細はCSS2 § 9.9 レイヤー表示および 付録E:積み重ねコンテキストの詳細説明で z-index、 stacking context、 描画順序について解説されています。
3. 配置座標
配置ボックスの正確な位置は insetプロパティで制御されます： 物理 insetプロパティ top、right、bottom、left、 フロー相対 insetプロパティ inset-block-start、 inset-inline-start、 inset-block-end、 inset-inline-end、 およびそのショートハンド inset-block、inset-inline、insetです。
これらのinsetプロパティの解釈は配置方式によって異なります：
3.1. ボックスインセット: top、right、bottom、left、inset-block-start、 inset-inline-start、 inset-block-end、 inset-inline-endプロパティ
| 名前: | top, right, bottom, left, inset-block-start, inset-inline-start, inset-block-end, inset-inline-end |
|---|---|
| 値: | auto | <length-percentage> |
| 初期値: | auto |
| 適用対象: | 配置要素 |
| 継承: | no |
| パーセンテージ: | 包含ブロックのサイズに対して。詳細は本文参照 |
| 算出値: | キーワードautoまたは算出された<length-percentage>値 |
| 正規順序: | 文法通り |
| アニメーション型: | 算出値型による |
| 論理プロパティグループ: | inset |
これらのinsetプロパティは、ボックスの対応する側に対して内側への「インセット」を表します （ボックス自身の書字モード基準； CSS Writing Modes 3 § 6 抽象ボックス用語参照）。 例：topは上端の下向きinsetを表します。 物理・フロー相対プロパティの相互作用は [CSS-LOGICAL-1]で定義されています。 各値の意味は以下の通りです：
- <length>
- インセットは基準エッジからの固定距離です。 負の値も許可されます。
- <percentage>
- インセットは対応軸の包含ブロックのサイズに対するパーセンテージです （例：leftやrightなら幅、topやbottomなら高さ）。 固定配置ボックスの場合は 該当するスクロールポートのサイズ基準となります。 負の値も許可されます。
- auto
- 制約のないインセットを表します。 詳細な意味は配置方式によって決まります。
注: fixed配置要素で 大きな値や負の値を使うと ビューポートの外に要素が移動し スクロール等で内容に到達できなくなることがあります。
3.2. ボックスインセットのショートハンド: inset-block、inset-inline、inset プロパティ
| 名前: | inset-block, inset-inline |
|---|---|
| 値: | <'top'>{1,2} |
| 初期値: | auto |
| 適用対象: | 配置要素 |
| 継承: | no |
| パーセンテージ: | 個別プロパティ参照 |
| 算出値: | 個別プロパティ参照 |
| 正規順序: | 文法通り |
| アニメーション型: | 算出値型による |
inset-blockとinset-inlineプロパティは ショートハンドプロパティであり、 それぞれinset-block-start＋inset-block-end、 またはinset-inline-start＋inset-inline-endを 1つの宣言でまとめて設定できます。 最初の値は開始側に、 2番目は終了側に割り当てます。 2番目が省略された場合は1番目の値が両側に適用されます。
| 名前: | inset |
|---|---|
| 値: | <'top'>{1,4} |
| 初期値: | auto |
| 適用対象: | 配置要素 |
| 継承: | no |
| パーセンテージ: | 個別プロパティ参照 |
| 算出値: | 個別プロパティ参照 |
| 正規順序: | 文法通り |
| アニメーション型: | 算出値型による |
insetプロパティは すべてのinsetプロパティを 1つの宣言で設定できるショートハンドプロパティです。 各側のロングハンドへの値の割り当ては marginプロパティと同様です。
デフォルトでは、insetプロパティ値は 対応する物理のロングハンドプロパティ—top、right、bottom、leftに割り当てられます。これらは歴史的理由でinset-プレフィックスを持ちません。 この動作は他の「4値を側面に割り当てる」プロパティ、margin等と同じです。
このようなプロパティがフロー相対のロングハンドに解決されることについては [CSS-LOGICAL-1]で議論されています。
insetがinset-*プロパティに展開されないのは 少し紛らわしいことは理解しています。
3.3. 相対配置
相対配置ボックスでは、 insetプロパティによって、 ボックスをそれぞれの辺から内側に移動させますが、サイズは変わりません。leftは右へ、rightは左へ移動します。 ボックスは相対配置によって分割や伸長されることはないため、 一つの軸で対になるused valueは お互いに反対符号でなければなりません：
- その軸で対になるinsetプロパティが両方ともauto（初期値）の場合、 そのused valueはゼロ （つまりボックスはその軸で元の位置のまま）。
- どちらか一方だけがautoの場合、 そのused valueはもう一方の反対符号となり、 ボックスは指定量だけ移動します。
- 両方ともautoでない場合、 位置が過剰制約されます。 （書字モード基準で 包含ブロックに関して） computedなend側の値は無視され、 そのused valueはstart側の反対符号となります。
次の3つのルールは同等であり、 ボックスを1em左にずらします：
div.a8{ position : relative; direction : ltr; left : -1 em ; right : auto} div.a8{ position : relative; direction : ltr; left : auto; right : 1 em } div.a8{ position : relative; direction : ltr; left : -1 em ; right : 5 em }
table-row-group、 table-header-group、 table-footer-group、 table-rowのボックスに指定した場合、 そのボックスの内容すべて（その行に属するtable cellも含む）がシフトしますが、 それ以外は影響しません。
注: positionは table-column-groupやtable-columnのボックスには適用されないため、 相対配置の影響は受けません。
3.4. 固定配置
固定配置は 相対配置に似ていますが オフセットは最も近いスクロールポート基準で自動計算されます。
固定配置されたボックスは、 insetプロパティによって 最も近いスクロールポートの 対応する辺からのinsetを表し、 ボックス位置を拘束するためのstickyビュー矩形を定義します。 （この目的ではauto値はゼロinsetとみなします。） この結果、任意の軸でstickyビュー矩形のサイズが その軸のborder boxより小さければ、 影響を受ける軸のend側insetは縮小され（負にもなり得る）、 stickyビュー矩形のサイズが その軸のborder boxと同じになるよう調整されます （endは書字モード基準）。
一方、最も近いスクロールポートが100pxしか高さがない場合、 下端insetが-120pxとなり、 stickyビュー矩形が200pxの高さとなり、 margin box全体が固定配置ボックス内に収まるようになります。
各ボックスの側について、 対応するinsetプロパティがautoでない場合、 かつボックスの対応するborder edgeが stickyビュー矩形の対応する辺の外側となる場合、 ボックスは視覚的に（相対配置と同様に） そのstickyビュー矩形の内側に移動する必要があります。 ただしそのposition boxが 自身の包含ブロック内に収まる範囲で調整されます。 position boxは margin boxですが、 その辺についてmargin edgeと 包含ブロックの対応する辺との距離が marginより短い場合は、 その距離がmarginの代わりとなります。
注: top に非auto値、 bottom にauto値をもつsticky配置要素は、 固定配置によって下方向にしか押し下げられず、 上方向にオフセットされることはありません。
注: 同じコンテナ内の複数の固定配置ボックスは 独立してオフセットされるため、重なり合う可能性があります。
3.4.1. 固定配置ボックスのスクロール位置
sticky配置要素（またはその子孫）のスクロール位置を対象とした操作の場合、 sticky配置要素はオフセットされた位置に存在するとみなさなければなりません。
3.5. 絶対（および固定）位置決め
絶対配置ボックスでは、 insetプロパティによって サイズ指定・配置される包含ブロックが 指定量だけ実質的に縮小されます。 その結果得られる矩形はinset修正済み包含ブロックと呼ばれます。 （区別のため、絶対配置ボックスの本来の包含ブロックは絶対配置包含ブロックとも呼ばれます。）
3.5.1. “inset修正済み包含ブロック”のinset解決
ある軸で一方のinsetプロパティだけがautoの場合はゼロに設定します。 両方のinsetプロパティがautoの場合は 対象軸の自己整列プロパティに応じて：
- self-start整列または同等の場合
- 開始側のinsetプロパティを静的位置に、 終了側のinsetプロパティをゼロに設定します。
- self-end整列または同等の場合
- 終了側のinsetプロパティを静的位置に、 開始側のinsetプロパティをゼロに設定します。
- center整列の場合
- start distanceを 静的位置矩形の中心から包含ブロックの開始端までの距離とし、 end distanceを 静的位置矩形の中心から包含ブロックの終了端までの距離とします。 start distanceがend distance以下なら 開始側insetプロパティをゼロに、 終了側insetプロパティを （包含ブロックサイズ - 2 × |start distance|）に設定します。 そうでなければ 終了側insetプロパティをゼロ、 開始側insetプロパティを （包含ブロックサイズ - 2 × |end distance|）に設定します。
上記規則では オーバーフロー整列は無視し、 normalはstartとみなし、 ベースラインやstretch整列値は フォールバック整列として扱います。
これらの調整の結果、 任意の軸で包含ブロックの有効サイズがゼロ未満になった場合、 影響軸の弱いinsetは サイズがゼロになるまで縮小されます（負にもなり得ます）。 一方だけがautoの場合は それが弱いinset （対のinsetが強いinset）、 そうでなければ弱いinsetはend側のinsetです （endは包含ブロックの書字モード基準）。
注: このinset修正済み包含ブロック内への絶対配置ボックスのサイズ指定・配置は § 4 絶対配置レイアウトモデルで説明されています。
対象軸の自己整列プロパティがnormalの場合、 その軸の弱いinsetの解決値は inset修正済み包含ブロックのその端と レイアウト後のmargin boxの端が一致するために必要な値となります。 （それ以外の場合は解決値は上記のused valueです。）
3.5.2. 静的位置と「静的位置矩形」の算出
同じ軸の両方のinsetプロパティがautoの場合、 ボックスを静的位置の静的位置矩形に整列させて解決します。 この矩形は、ボックスが整形コンテキストにposition: staticとして参加すると仮定した場合に導かれる整列コンテナです（実際の包含ブロックとは独立しています）。 静的位置は、 ボックスがposition: staticだった場合の位置の近似値を表します。
- ブロックレイアウト
-
静的位置（block-level
box）は[CSS2]第10章に定義されています。
静的位置矩形はゼロ厚みの矩形で、
ボックスの静的位置包含ブロックのインライン軸両側にまたがり、
block-startの静的位置に配置されます
（CSS2§10.6.4参照）。
注: ブロックレイアウトでは静的位置矩形は「仮想ボックス」の位置に相当します （CSS2.1§10.3.7参照）。 整列プロパティがないため、 CSS2.1では絶対配置ボックスは常にblock-start＋inline-start整列で 静的位置矩形内に配置されます。
- インラインレイアウト
- 静的位置（inline-level box）は[CSS2]第10章に定義されています。 静的位置矩形はゼロ厚みの矩形で、 line-over／line-under の辺にまたがるline box（仮想ボックスが入る）の位置に配置されます （CSS2§10.3.7参照）。 inline-startの静的位置に配置されます。
- フレックスレイアウト
- 静的位置矩形（flex containerの子）は flex containerの内容エッジ（交差軸）と、 仮想位置（主軸）の外側エッジに対応します。 flex containerの子の静的位置（[CSS-FLEXBOX-1]参照）。
- グリッドレイアウト
- デフォルトでは、grid containerの子の静的位置矩形は、grid containerの内容エッジに対応します。 ただし、そのgrid containerがボックスの実際の包含ブロックも確立する場合は、 grid-placementプロパティによって指定されたgrid areaが静的位置矩形となります。 詳細はgrid containerの子の静的位置（[CSS-GRID-1]）を参照してください。
静的位置および 静的位置矩形を見つける際には、 floatや clear （およびposition）が それぞれ初期値であると仮定します。 そのため、displayについても 仮想的な異なる値を仮定する必要が生じる場合があります。 （この条件下で要素が持つことになる 包含ブロックは、 静的位置包含ブロックです。） ボックス整列プロパティが 効果を持つ場合は、 静的位置包含ブロックを 有効な包含ブロックとして使用し、 整列軸や方向の解決にもその書字モードを利用します。 さらに、固定配置要素の包含ブロックは 初期包含ブロックであると仮定し、 ビューポートではありません。 また、すべてのスクロールコンテナは 初期スクロール位置まで スクロールされているものとみなします。 最後に、ボックス自身のすべてのautoマージンは 0として扱われます。
トップレイヤーにあるボックスは 常に初期包含ブロックを 静的位置矩形として使用します。
3.5.3. 絶対位置要素の断片化
断片化フロー内では、 絶対位置のボックスは 包含ブロックを基準に配置され、 断片化区切りは無視されます （フローが連続しているかのように）。 ボックスはその後、複数の 断片化コンテナに分割されることがあります。
ページメディア内の絶対配置コンテンツで、 レイアウト中のページ（現在のページ）以外のページの位置に解決された場合や、 現在のページでもすでに印刷済みの領域に解決された場合、 プリンタはその内容を以下のように扱うことがあります：
- 現在のページに配置する
- 後続のページに配置する
- 全く配置しない（省略する）
Note: ブロックレベル要素が 複数ページにまたがって分割される場合、 各ページで幅が異なることがあり、 デバイス固有の制限がある場合もあります。
ユーザーエージェントは 固定配置ボックスの内容をページ分割してはなりません。
Note: ユーザーエージェントは他の方法で不可視コンテンツを印刷することもあります。 詳しくは CSS Paged Media 3 § 3.2 ページボックス外のコンテンツ を参照してください。
4. 絶対配置レイアウトモデル
絶対配置は ボックスをフロー外にするだけでなく、 包含ブロック内で （包含ブロックの最終サイズが決定した後に） 絶対配置レイアウトモデルに従ってレイアウトされます：
- まず、inset修正済み包含ブロックを算出し、 利用可能空間を定義します。 （§ 3.5 絶対（および固定）配置参照。）
- 次に、幅と高さをこの確定的な利用可能空間に対して解決します。 希望サイズは最大サイズ（あれば）で上限、 最小サイズで下限になります。 § 4.1 絶対配置ボックスの自動サイズ参照。 パーセンテージは 元の包含ブロックサイズ基準で解決されます。
- 次に、autoマージンの値を算出します。 § 4.2 絶対配置ボックスの自動マージン参照。
- 最後に、margin boxをinset修正済み包含ブロック内で整列します。 § 5 絶対配置ボックスの自己整列参照。
4.1. 絶対配置ボックスの自動サイズ
自動サイズ（絶対配置ボックス）は、以下のようにinset修正済み包含ブロック基準で解決します：
- 対象軸の自己整列プロパティがstretchであり、軸のinsetプロパティ・marginが全てautoでない場合
- またはnormalで、ボックスが非置換要素、テーブルラッパーボックスでなく、対象軸にautoなinsetがない場合
- その他
ただし、ボックスにアスペクト比がある場合、 自動サイズは比率依存軸ではmax-contentサイズとして解決します。 両軸が自動サイズの場合、 一方の軸だけがautoなinsetを持つ場合はその軸が比率依存軸、 それ以外の場合はブロック軸が比率依存軸になります。 自動サイズ（比率決定軸）は上記の方法で決定されます。
これらのサイズ算出時、 autoなmarginはゼロとして扱います。
絶対配置ボックスの自動最小サイズは常にゼロです。
注: フォームコントロールがリサイズ可能で（画像など置換要素を直接表していない場合）、
ここでは非置換要素として扱われることが期待されます。
HTMLでは、<input type=image>以外の全フォームコントロールが非置換要素として扱われます。
4.2. 絶対配置ボックスの自動マージン
対象軸のいずれかのinsetプロパティがautoの場合、 その軸のautoなmarginはゼロに解決されます。
それ以外の場合、残りスペースは 対象軸のinset修正済み包含ブロックのサイズから ボックスの使用サイズを引いた値で計算され、 その残りスペースは対象軸のautoマージン間で分配されます。 ただし （書字モード基準で 包含ブロックに関して）、 インライン軸で残りスペースが負かつ両マージンがautoの場合、 開始マージンはゼロになり、 終了マージンが残りスペースを受け取ります。
注: 通常のフロー内レイアウトとは異なり、 autoなmarginに割り当てられるスペースは 絶対配置では負になることもあります。
「負のサイズの包含ブロック」ではどうすべきか？ CSS2.1とこのドラフトでは現在矛盾があります。[Issue #11478]
5. 絶対配置ボックスの自己整列
対象軸のいずれかの算出値のinsetプロパティがautoの場合、 margin boxは対応する強いinset側のinset修正済み包含ブロックの端に整列されます（包含ブロックをはみ出す場合もあります）。
それ以外で、いずれかのmarginがautoの場合、 § 4.2 絶対配置ボックスの自動マージンの規則で位置決定します。
それ以外の場合、ボックスは 対象軸の自己整列プロパティ（書字モード基準で包含ブロックにより定義）に従って、 margin boxを整列対象、 inset修正済み包含ブロックを整列コンテナとして整列されます。 ただし、明示的なオーバーフロー整列が指定されておらず、 margin boxがinset修正済み包含ブロックからはみ出す場合は、 CSS Box Alignment 3 § 4.4.1.2 絶対配置ボックスの自己整列に記載された通り、 オーバーフローが最小になるように整列が調整されます。
6. 旧絶対配置レイアウトモデル
このセクションは新しい§ 4 絶対配置レイアウトモデルセクションに置き換え中です。 比較用に保持されています： 両モデルは水平書字モードでボックスの自己整列がnormalの時は同じ結果になるはずです。
6.1. 絶対配置・非置換要素の幅
これらの要素の使用値を決定する制約は次の通りです：
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 包含ブロックの幅
もしleft、width、rightの3つ全てがautoの場合： margin-leftおよびmargin-rightのauto値をまず0に設定します。 次に、静的位置を確立する要素のdirectionプロパティがltrの場合、leftを静的位置に設定し、下記の規則三を適用します。 それ以外の場合はrightを静的位置に設定し、下記の規則一を適用します。
3つのうちどれもautoでない場合： margin-leftとmargin-rightが両方autoなら、 二つのマージンが同じ値になるよう制約を付加して式を解きます。 ただし負になる場合は、包含ブロックのdirectionがltr（rtl）の場合、 margin-left（margin-right）を0に設定し、 margin-right（margin-left）を解きます。 どちらか一方だけmargin-leftまたはmargin-rightがautoなら、その値を解きます。 制約過多の場合は、 left（静位置包含ブロックのdirectionがrtlの場合）や、 right（directionがltrの場合）の値を無視して解きます。
その他の場合、 margin-leftとmargin-rightのauto値を0にし、 以下の6つの規則のうち該当するものを選びます。
- leftとwidthがautoで、rightはautoでない場合、 widthはシュリンク・トゥ・フィットとなり、 leftを解きます。
- leftとrightがautoで、widthがautoでない場合、 静位置包含ブロックのdirectionがltrならleftを静位置に、 それ以外ならrightを静位置に設定します。 その後、left（directionがrtlの場合）またはright（directionがltrの場合）を解きます。
- widthと rightがautoで、leftがautoでない場合、 widthはシュリンク・トゥ・フィットとなり、 rightを解きます。
- leftがautoで、width・rightがいずれもautoでない場合、 leftを解きます。
- widthがautoで、left・rightがいずれもautoでない場合、 widthを解きます。
- rightがautoで、left・widthがいずれもautoでない場合、 rightを解きます。
| autoか？ | 結果 | ||||
|---|---|---|---|---|---|
| left | width | right | margin-left | margin-right | |
| ✔ | ✔ | ✔ | any |
| |
| ✘ | ✘ | ✘ | ✔ | ✘ | auto margin → 空きスペース |
| ✘ | ✔ | ||||
| ✔ | ✔ |
| |||
| ✘ | ✘ | rightをautoとして扱う | |||
| ✔ | ✘ | ✔ | any |
| |
| ✔ | ✔ | ✘ | any |
| |
| ✘ | ✔ | ✔ | any |
| |
| ✔ | ✘ | ✘ | any |
| |
| ✘ | ✘ | ✔ | |||
| ✘ | ✔ | ✘ | |||
6.2. 絶対または固定配置・置換要素の幅
heightとwidthの算出値が両方autoで、 要素に固有幅（intrinsic width）がある場合、 その固有幅がwidthの使用値となります。
heightとwidthの算出値が両方autoで、 要素に固有幅がなく、固有高さ（intrinsic height）と固有比率（intrinsic ratio）がある場合、 またはwidthがautoでheightに他の算出値があり、 要素に固有比率がある場合、 widthの使用値は：
(使用高さ) × (固有比率)
heightとwidthの算出値が両方autoで、 要素に固有比率があり、固有高さ・固有幅がない場合、 かつ包含ブロックの幅が置換要素の幅に依存しない場合、 widthの使用値は 通常フローのブロックレベル非置換要素の制約式から算出します。
それ以外でwidthがautoで、 要素に固有幅がある場合、 その固有幅がwidthの使用値となります。
それ以外でwidthがautoで、 上記のいずれにも当てはまらない場合、 widthの使用値は300pxとなります。 300pxがデバイスに収まらない場合、 ユーザーエージェントは2:1比率でデバイスに収まる最大矩形の幅を使用すべきです。
widthを確定した後、 置換要素を配置するには、以下の規則を適用してください。
- leftとrightが両方autoの場合、 静位置を確立する要素のdirectionプロパティがltrなら leftを静位置に設定し、rightを解く。 directionがrtlなら rightを静位置に設定し、leftを解く。
- leftがautoでrightがautoでない場合、 margin-leftやmargin-rightのauto値を0に置換し、leftを解く。
- rightがautoでleftがautoでない場合、 margin-leftやmargin-rightのauto値を0に置換し、rightを解く。
- この時点でmargin-leftとmargin-rightが両方まだautoなら、 二つのマージンが同じ値になるよう制約を付加して式を解く。ただし負になる場合は、包含ブロックのdirectionがltr（rtl）の場合 margin-left（margin-right）を0に設定し、 margin-right（margin-left）を解く。
- この時点でautoが1つだけ残っていれば、その値を解く。
- この時点で値が過剰制約された場合、 left（静位置包含ブロックのdirectionがrtlの場合）または right（directionがltrの場合）の値を無視して解く。
6.3. 絶対配置・非置換要素の高さ
絶対配置要素では、 垂直寸法の使用値は次の制約を満たす必要があります：
top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = 包含ブロックの高さ
もしtop、height、bottomの3つ全てがautoの場合： margin-topとmargin-bottomのauto値をまず0に設定し、 topを静位置に設定し、 最後に下記の規則三を適用します。
3つのうちどれもautoでない場合： margin-topとmargin-bottomが両方autoなら、二つのマージンが同じ値になるよう制約を付加して式を解きます。 margin-topまたはmargin-bottomのどちらか一方がautoなら、その値を解きます。 制約過多の場合は、 bottomの値を無視して解きます。
その他の場合、 auto値をmargin-topとmargin-bottomに0を設定し、 以下の6つの規則のうち該当するものを選びます。
-
topとheightがautoでbottomがautoでない場合、 高さはブロック整形コンテキストルートの自動高さ基準となり、 topを解きます。
-
heightとbottomがautoでtopがautoでない場合、 高さはブロック整形コンテキストルートの自動高さ基準となり、 bottomを解きます。
6.4. 絶対配置・置換要素の高さ
heightと widthの算出値が両方autoで、要素に固有高さがある場合、 その固有高さがheightの使用値となります。
それ以外でheightが autoで要素に固有比率がある場合、 heightの使用値は：
(使用幅) / (固有比率)
それ以外でheightが autoで要素に固有高さがある場合、 その固有高さがheightの使用値となります。
それ以外でheightが autoで、上記の条件に当てはまらない場合、 heightの使用値は、 2:1比率で高さが150px以下、かつデバイス幅以下で最大となる矩形の高さに設定しなければなりません。
heightを確定した後、 置換要素を配置するには、以下の規則を適用してください。
-
bottom が auto の場合、margin-top または margin-bottom の auto を 0 に置き換えます。
-
この時点で margin-top と margin-bottom の両方がまだ auto の場合、2つのマージンが同じ値でなければならないという追加制約のもとで方程式を解きます。
-
この時点で残りが1つだけ auto である場合、その値について方程式を解きます。
-
この時点で値が過剰に制約されている場合、bottom の値を無視して、その値について解を求めます。
7. 通常フロー・フロート・配置の情報比較
このセクションは規範ではありません。
通常フロー、 相対配置、 フロート、 絶対配置 の違いを説明するために、 以下のHTMLを使った一連の例を示します。
<!DOCTYPE html> < html > < head > < title > 配置方式の比較</ title > < style > body { display : block ; font-size : 12 px ; line-height : 200 % ; width : 400 px ; height : 400 px } p { display : block } span { display : inline } </ style > </ head > < body > < p > 段落内容の始まり。< span id = "outer" > 外側内容の開始。< span id = "inner" > 内側内容。</ span > 外側内容の終了。</ span > 段落内容の終わり。</ p > </ body > </ html >
各例でouterとinner要素によって生成されるボックスの最終位置が異なります。図の左側の数字は、通常フローにおける 行（わかりやすくするため二重行送り）の位置を示します。
注: このセクションの図は説明用で縮尺通りではありません。 各配置方式の違いを強調するためのものであり、 例の正規レンダリングを示すものではありません。
7.1. 通常フローの例
outerとinnerに対して、ボックスの通常フローを変更しないCSS宣言：
P要素はすべてのインライン内容（匿名インラインテキストと 2つのSPAN要素）を含みます。よって内容はすべてインライン整形コンテキストで P要素が確立する包含ブロック内でレイアウトされ、結果は下図のようになります：
7.2. 相対配置の例
相対配置の効果を確認するため、次のように指定します：
#outer{ position : relative; top : -12 px ; color : red} #inner{ position : relative; top : 12 px ; color : blue}
テキストはouter要素まで通常に流れ、outerテキストは 通常フローの位置と寸法で1行目末尾にレイアウトされます。 その後、テキストを含むインラインボックス全体が-12px（上方向）にシフトされます。
inner内容は、outerの子として通常は「outer contents」の直後（1.5行目）に流れますが、 inner内容自身がouter内容から12px（下方向）オフセットされ、 元の位置（2行目）に戻ります。
outerの相対配置は、outer以降の内容には影響しません。
なお、もしouterのオフセット値が-24pxだった場合、「outer」テキストと本文テキストが重なります。
7.3. フロートの例
今度はinner要素のテキストを右にフロートさせる場合を考えます。以下のCSSを使います：
テキストはinnerボックスまで通常に流れ、innerボックスはフローから外れ、右端にフロートします（widthは明示指定）。左側の行ボックスは短くなり、残りのテキストがそこに流れます。
clearプロパティの効果を見るため、 例にsibling要素を追加します：
<!DOCTYPE html> < html > < head > < title > 配置方式の比較II</ title > < style > # inner { float : right ; width : 130 px ; color : blue } # sibling { color : red } </ style > </ head > < body > < p > 段落内容の始まり。< span id = "outer" > 外側内容の開始。< span id = "inner" > 内側内容。</ span > < span id = "sibling" > 兄弟内容。</ span > 外側内容の終了。</ span > 段落内容の終わり。</ p > </ body > </ html >
これらのスタイルによりinnerボックスは右にフロートし、 残りのテキストが空いたスペースに流れ込みます：
ただし、sibling要素のclearプロパティをrightに設定すると（生成されたsiblingボックスは右側のフロートボックスの隣に配置されなくなる）、sibling内容はフロートの下から流れ始めます：
7.4. 絶対配置の例
次は絶対配置の効果を考えます。outerとinnerに対する以下のCSS宣言：
#outer{ position : absolute; top : 200 px ; left : 200 px ; width : 200 px ; color : red; } #inner{ color : blue}
これによりouterボックスの上端が包含ブロックから配置されます。 配置ボックスの包含ブロックは最も近い配置された祖先（なければ初期包含ブロック、本例の場合）によって確立されます。 outerボックスの上端は包含ブロックの上端から200px下、 左端は左端から200pxです。子ボックス（inner）は親に対して通常に流れます。
次は絶対配置ボックスが相対配置ボックスの子の場合です。親outerボックス自体はオフセットされませんが、 positionをrelativeに設定すると、 そのボックスが子孫の配置基準になります。outerは複数行に分割されたインラインボックスなので、 最初のインラインボックスの上端・左端（図中太い破線）がtopやleftの参照になります。
#outer{ position : relative; color : red} #inner{ position : absolute; top : 200 px ; left : -100 px ; height : 130 px ; width : 130 px ; color : blue; }
結果は下図のようになります：
outerボックスを配置しない場合：
#outer{ color : red} #inner{ position : absolute; top : 200 px ; left : -100 px ; height : 130 px ; width : 130 px ; color : blue; }
この場合、innerの包含ブロックは初期包含ブロックとなります（本例）。 下図はこの場合のinnerボックスの位置です。
相対配置と絶対配置は、下記例のようにチェンジバーの実装にも使えます。次の断片：
< p style = "position: relative; margin-right: 10px; left: 10px;" > 2つの赤いハイフンをチェンジバーとして使っています。 これらは「THIS」を含む行の左側に「浮動」します。< span style = "position: absolute; top: auto; left: -1em; color: red;" > --</ span > この単語。</ p >
上記は下図のような結果になります：
まず段落（図中の包含ブロックの枠で示される）は通常通り流れます。次にleft: 10px;によって
包含ブロックの左端から10pxだけオフセットされます（右マージン10pxはこのオフセット分確保されています）。
2つのハイフンはチェンジバーとしてフロー外に出され、現在の行（top: auto）で
含みブロックの左端から-1emの位置に配置されます（Pの最終位置が基準）。
その結果、チェンジバーが常に「現在の行」の左側に「浮動」します。
8. 謝辞
このモジュールは、多くの有益な方々の意見や支援がなければ実現できませんでした。感謝します： Rossen Atanassov、 Bert Bos、 Oriol Brufau、 Tantek Çelik、 Arron Eicholz、 Sylvain Galineau、 John Jansen、 Chris Jones、 Ian Kilpatrick、 Anton Prowse。
変更履歴
2025年3月11日作業草案からの主な変更点：
-
初期固定包含ブロックと 初期包含ブロックとの関係を定義し、 この概念に名前を与えました。
併せて以前の変更点も参照してください。
プライバシーに関する考慮事項
本仕様は新たなプライバシー上の考慮事項を導入しません。
セキュリティに関する考慮事項
攻撃者が任意のCSSを注入できる場合、配置レイアウトによって攻撃者が制御する要素を ページ上の他の任意の要素に重ねて配置しやすくなり、 ページ利用者を騙す可能性があります。 （この攻撃には様々な方法があります：負のmargin、 transformなど。 ページ内の部分に任意のCSSを適用できないようにしてください。）
position: fixedは ページがモーダルダイアログをエミュレートすることを可能にし、 利用者がユーザーエージェントと対話していると誤認し、 ページが機密情報を取得できるように誘導する可能性があります。 ユーザーエージェントは、ネイティブダイアログが ページによってエミュレートできない方法で配置されることを保証しなければなりません。 特に、ダイアログの一部がウェブコンテンツが描画できる「毒されたピクセル」の外側であることが必要です。