CSS Positioned Layout Module Level 3

1.1. ~module間の相互作用

この~moduleは、 以下に挙げる `CSS2$r の各節にて定義された`位置決め~scheme$の特能を置換して, 拡張する。 ◎ This module replaces and extends the positioning scheme features defined in [CSS2] sections:

この~moduleはまた、 `CSS-LOGICAL-1$r `§ ~flow相対な~offset＠~CSSLOGICAL#position-properties$【！#inset-properties】 における各種 `inset-*^p ~propの定義を置換して，それに取って代わる。 ◎ It also replaces and supersedes the inset* property definitions in [CSS-LOGICAL-1] (CSS Logical Properties 1 § 4.3 Flow-relative Offsets: the inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline, and inset shorthands).

1.2. 値~定義

【 この節の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】

2.1. 有位置な~boxの包含塊

［ `static$v ／ `relative$v ／ `sticky$v ］`~box$用の`包含塊$は、 ~boxが関与する`整形~文脈$により定義される。 ［ `absolute$v ／ `fixed$v ］`~box$用の`包含塊$は、 次に従って定義される： ◎ The containing block of a static, relative, or sticky box is as defined by its formatting context. For fixed and absolute boxes, it is defined as follows:

`absolute$v の場合 ◎ If the box has position: absolute:

~boxの`包含塊$は、 先祖に`絶対~位置決め包含塊$を確立する~boxが： ◎ The containing block is established by＼

• 在るならば、 それらのうち~boxに最も近い先祖 %先祖 に応じて，次の仕方で確立される： ◎ the nearest ancestor box that establishes an absolute positioning containing block, in the following way:

  • %先祖 は`行内~box$でない場合 ⇒ %先祖 の`~padding辺$により形成される — 他が指定されない限り （例えば、 `CSS Grid Layout^cite `§ 包含塊が格子~容器により生成されているとき＠~CSSGRID#abspos-items$ を見よ）。 ◎ If the ancestor is not an inline box, • the containing block is formed by the padding edge of the ancestor, unless otherwise specified (for example, see CSS Grid Layout 1 § 9.1 With a Grid Container as Containing Block).

  • %先祖 は`行内~box$である場合、 各~軸において，次に挙げる辺により形成される矩形になる：

    • %先祖 を成す最初の`~box断片$の最も`始端$に来る`内容~辺$ — 同じ行l上に複数個の断片がある場合 （例：`双向性~並替ng＠~CSSWM#bidi-box-model$に因り）、 最も`始端$に来るものが，最初の断片とされる。
    • %先祖 を成す各`~box断片$の`内容~辺$のうち最も`終端$に来る辺

    ここで、 始端, 終端は %先祖 の~boxの`書字~mode$に基づくとする。

    ◎ If the ancestor is an inline box, using the writing mode of that box, • the containing block is formed by forming a rectangle from the start-most content edges (in both axes) of the first box fragment of the ancestor, and the end-most content edges of the end-most box fragment(s) of the ancestor in each axis. If there are multiple fragments on the same line (e.g. due to bidi reordering), take the start-most fragment as the first fragment.

    ~boxが複数~行lに断片化されるとき、 何が矩形を形成するために有用な包含塊になるか？ `8284$issue ◎ What is a useful containing block to form when the box is fragmented across multiple lines? [Issue #8284]

    注記： 断片化された`行内~box$により形成される`包含塊$は、 `CSS2$r には定義されていない。 ◎ Note: The containing block formed by a fragmented inline box was undefined in [CSS2].

• 無いならば、 `初期~包含塊$になる。 ◎ If no ancestor establishes one, the absolute positioning containing block is the initial containing block.

【 上述のように決定される`包含塊$は， “~boxの`絶対~位置決め包含塊$” とも称される — この句は、 ~boxがそれを確立したことではなく， ~boxは`絶対的に位置され$ている（かつ`固定的に位置され$ていない）前提を含意する。 】

注記： 要素に`絶対~位置決め包含塊$を確立させる~propには、 `position$p, `transform$p, `will-change$p, `contain$p, … などがある。 ◎ Note: Properties that can cause a box to establish an absolute positioning containing block include position, transform, will-change, contain…

`fixed$v の場合 ◎ If the box has position: fixed:

~boxの`包含塊$は、 先祖に `固定d位置決め包含塊@ を確立する~boxが： ◎ The containing block is established by＼

• 在るならば、 それらのうち最も近い先祖により — `絶対~位置決め包含塊$のときと同じ仕方で — 確立される。 ◎ the nearest ancestor box that establishes an fixed positioning containing block, with the bounds of the containing block determined identically to the absolute positioning containing block.

  注記： 要素に`固定d位置決め包含塊$を確立させる~propには、 `transform$p, `will-change$p, `contain$p, … などがある。 ◎ Note: Properties that can cause a box to establish a fixed positioning containing block include transform, will-change, contain…

• 無いならば： ◎ If no ancestor establishes one, the fixed positioning containing block is:

  • `連続的~媒体$においては、 `~layout表示域$になる （その~sizeは、 `動的な表示域~size$に合致する）。 その結果、 `固定的に位置され$た~boxは，文書が~scrollされても移動しない。 ◎ in continuous media, the layout viewport (whose size matches the dynamic viewport size); as a result, fixed boxes do not move when the document is scrolled.

    注記： この点に関しては、 `固定的な背景~画像＠~CSSBG#background-attachment$ （ `background-attachment$p が `fixed^v にされたそれ）と同様になる。 ◎ Note: In this respect, they are similar to fixed background images (background-attachment: fixed).

  • `~paged媒体$においては、 各~pageの`~page区画$になる。 その結果，`固定的に位置され$た`~box$は、 ~pageごとに~~複製される （例えば，印刷~previewのように，~pageが`表示域$を通して見える【呈示されている】場合でも、 ~page~boxのみを基準に固定される）。 ◎ in paged media, the page area of each page; fixed positioned boxes are thus replicated on every page. (They are fixed with respect to the page box only, and are not affected by being seen through a viewport; as in the case of print preview, for example.)

  注記： その結果，`固定d位置決め$においては、［ `~layout表示域$／`~page区画$ ］の外側まで拡張する部分は，［ そこへは~scrollし得なくなる／印刷されなくなる ］。 ◎ Note: As a result, parts of fixed-positioned boxes that extend outside the layout viewport/page area cannot be scrolled to and will not print.

【 上述のように決定される`包含塊$は， “~boxの`固定d位置決め包含塊$” とも称される — この句は、 ~boxがそれを確立したことではなく，~boxは`固定的に位置され$ている前提を含意する。 】

<!DOCTYPE html>
<html>
    <head>
        <title>包含塊の~~説明</title>
    </head>
    <body id="body">
        <div id="div1">
        <p id="p1">最初の段落の~text...</p>
        <p id="p2">これは <em id="em1">
        <strong id="strong1">2 番目の</strong> 段落の中の~text</em></p>
        </div>
    </body>
</html>

#div1 { position: absolute; left: 50px; top: 50px }

#div1 { position: absolute; left: 50px; top: 50px }
#em1  { position: absolute; left: 100px; top: 100px }

2.2. 塗ng順序と積層~文脈

`z-index$p ~propは、 どの`有位置な~box$にも適用される。 `z-index$p が `auto＠~CSS2J#valdef-z-index-auto$v のときは、 `有位置な~box$のうち： ◎ The z-index property applies to all positioned boxes. When z-index is auto:

• ［ `固定的に位置され$た／`張付きに位置され$た ］ものは、 `積層~文脈$を形成する。 ◎ Fixed and sticky positioned boxes nonetheless form a stacking context.
• ［ `相対的に位置され$た／`絶対的に位置され$た ］ものは、 `積層~文脈$を形成しない。 が、 新たな`積層~文脈$を生成したかのように塗られる — その子孫のうち［ `有位置$なもの／`積層~文脈$を形成するもの ］は［ 新たな`積層~文脈$の一部を成さず，現在の`積層~文脈$の一部を成す ］ことを除いて。 ◎ Relative and absolute positioned boxes do not form a stacking context, but are painted as if those elements did generated new stacking contexts, except that their positioned descendants and any would-be child stacking contexts take part in the current stacking context.

注記： `根~要素$は、 常に`積層~文脈$を形成する — `z-index$p に関わらず。 ◎ Note: The root element always forms a stacking context regardless.

［ `z-index$p, `積層~文脈$, 塗ng順序 ］についての詳細は、 `CSS2$r ［ `§ 多層化された呈示＠~CSS2J#layers$, `§ 積層~文脈についての詳しい記述＠~CSS22/zindex.html$ ］を見よ。 ◎ See CSS2 § 9.9 Layered presentation and Appendix E: Elaborate description of Stacking Contexts for details about z-index, stacking contexts, and painting order.

3.1. ~box~inset： `top^p, `right^p, `bottom^p, `left^p, `inset-block-start^p, `inset-inline-start^p, `inset-block-end^p, `inset-inline-end^p ~prop

これらの`~inset~prop$は、 ~boxの対応している側からの “~inset” — 内方への~offset — を表現する（どの~propが上下左右どの側に対応するかは、 ~boxの自前の`書字~mode$に基づく — `CSS-WRITING-MODES-3$r `§ ~boxの抽象的な各種用語＠~CSSWM#abstract-box$ を見よ）。 例えば， `top$p は、 上端~辺から下方への~insetを表現する。 `物理的$な~propと`~flow相対$な~propは、 `CSS-LOGICAL-1$r に定義されるように相互作用する。 各種 値の意味は： ◎ These inset properties represent an inward “inset” on the corresponding side of the box (with respect to the box’s own writing mode; see CSS Writing Modes 3 § 6 Abstract Box Terminology). For example, top represents a downward inset of the top edge. The physical and flow-relative properties interact as defined in [CSS-LOGICAL-1]. Values have the following meanings:

`length$t

~insetは、 基準~辺からの固定的な距離になる。 ◎ The inset is a fixed distance from the reference edge.＼

負な値も許容される。 ◎ Negative values are allowed.

`percentage$t

~insetは、 対応する軸における`包含塊$の~size （例： `left$p ／ `right$p に対しては横幅, `top$p ／ `bottom$p に対しては縦幅） に相対的な百分率になる。 `張付きに位置され$た~box用の~insetは、 代わりに`最も近い~scrollport$【！関連な`~scrollport$】の~sizeに相対的になる。 ◎ The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size.＼

負な値も許容される。 ◎ Negative values are allowed.

`auto@v

拘束されない~insetを表現する。 正確な意味は、 `位置決め~scheme$に依存する。 ◎ Represents an unconstrained inset; the exact meaning depends on the positioning scheme.

注記： `固定的に位置され$た要素~用の~insetに大き過ぎる値や負な値を利用すると、 要素は`表示域$の外側へ容易に移動され得る。 そうなった場合、 内容は，~scrollする その他の手段を通して到達できなくなる。 ◎ Note: For fixed positioned elements, using large values or negative values can easily move elements outside the viewport and make the contents unreachable through scrolling or other means.

3.2. ~box~inset略式~prop： `inset-block^p, `inset-inline^p, `inset^p ~prop

`inset-block$p ~propは［ `inset-block-start$p, `inset-block-end$p ］を， `inset-inline$p ~propは［ `inset-inline-start$p, `inset-inline-end$p ］を単独の宣言で設定するための`略式~prop$である。 2 個の成分~値は、 順に［ `始端$, `終端$ ］側を設定する。 2 個目の値が省略された場合の既定は、 1 個目の値と同じになる。 ◎ The inset-block and inset-inline properties are shorthand properties for setting inset-block-start + inset-block-end or inset-inline-start + inset-inline-end, respectively, in a single declaration. The first component value sets the start side, the second sets the end; if omitted, the second value defaults to the first.

`inset$p ~propは、 すべての`~inset~prop$を単独の宣言で設定する`略式~prop$であり， 各~側を表現している下位propを`時計回りに設定する$ 【！exactly as the margin property does for its longhands】。 ◎ The inset property is a shorthand property that sets all of the inset properties in a single declaration, assigning values to the longhands representing each side exactly as the margin property does for its longhands.

3.3. 相対~位置決め

`相対的に位置され$た~box %~box 用には、 `~inset~prop$は， %~box を — その~sizeは変更することなく — 対応する辺から内方へ移動する。 `left$p に対する【正な】値は， %~box を右へ移動させ、 `right$p に対する【正な】値は， %~box を左へ移動させる，等々。 %~box は，相対~位置決めにより［ 分割される／伸張される ］ことはないので、 所与の軸において互いに反対側の`~inset~prop$の`使用~値$は， 互いに反数になる（それらの和は 0 になる）ことが要求される — そのような 2 つの`~inset~prop$の`算出d値$が： ◎ For a relatively positioned box, the inset properties move the box inward from the respective edge, without changing its size. left moves the box to the right, right moves it to the left, etc. Since boxes are not split or stretched as a result of relative positioning opposing used values in a given axis must be negations of each other:

• どちらも `auto$v （`初期~値$）ならば ⇒ どちらも`使用~値$は 0 になる （すなわち，当の軸においては、 %~box は元の位置に居座る）。 ◎ If opposing inset properties in an axis both compute to auto (their initial values), their used values are zero (i.e., the boxes stay in their original position in that axis).
• 片方だけ `auto$v ならば ⇒ その方の`使用~値$が他方の算出d値の反数になる（ %~box は指定された量だけズラされる）。 ◎ If only one is auto, its used value becomes the negation of the other, and the box is shifted by the specified amount.
• どちらも `auto$v でないならば ⇒ 位置は拘束され過ぎ — この場合、［ %~box の`包含塊$の`終端$と同じ側†における`~inset~prop$ ］の`算出d値$は無視され，その`使用~値$は［ もう片方の`~inset~prop$の使用~値 ］の反数になる。 （† この終端は，`包含塊$の`書字~mode$に基づくので、 %~box の終端とは反対~側になる場合もあることに注意。） ◎ If neither is auto, the position is over-constrained; (with respect to the writing mode of its containing block) the computed end side value is ignored, and its used value becomes the negation of the start side.

div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

［ `table-row-group$v ／ `table-header-group$v ／ `table-footer-group$v ／ `table-row$v ］`~box$に指定された~insetは、 ~boxのすべての内容に影響する — これには、 `~table~cell$のうち［ それが最初に~spanする~rowは，当の~boxに含まれるもの ］すべてが含まれるが， 他の`~table~cell$は含まれない。 ◎ If specified on a table-row-group, table-header-group, table-footer-group, or table-row box the shift affects all the contents of the box, including all table cells that originate in the affected row, but not those that don’t.

注記： `position$p は［ `table-column-group$v ／ `table-column$v ］~boxには適用されない — それらの~boxは、 `相対~位置決め$に影響されない。 ◎ Note: Since position does not apply to table-column-group or table-column boxes, they are not affected by relative positioning.

3.4. 張付き位置決め

`張付き位置決め$は、 次を除いて，`相対~位置決め$に類似する ⇒ 各~offsetは、 `最も近い~scrollport$を基準に，以下に従って自動的に計算される ◎ Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.

`張付きに位置され$た`~box$ %~box に対しては、 `~inset~prop$は，`最も近い~scrollport$の対応する辺からの~insetを表現する。 それは、 %~box の位置を拘束するために利用される `張付き~view矩形@ （ `sticky view rectangle^en ）を定義する。 （この目的においては、 `auto$v 値は~inset 0 を表現する）。 所与の軸において，この結果の`張付き~view矩形$の~sizeが %~box の`~border~box$の~size未満になる場合、 当の軸における %~box の［ %~box の`包含塊$の`終端$と同じ側†にある辺 ］の実効~insetは，そうならなくなる所まで抑制される（場合によっては負になる）。 （† この終端は，`包含塊$の`書字~mode$に基づくので、 %~box の終端とは反対~側になる場合もあることに注意。） ◎ For a sticky positioned box, the inset properties represent insets from the respective edges of the nearest scrollport, defining the sticky view rectangle used to constrain the box’s position. (For this purpose an auto value represents a zero inset.) If this results in a sticky view rectangle size in any axis less than the size of the border box of the sticky box in that axis, then the effective end-edge inset in the affected axis is reduced (possibly becoming negative) to bring the sticky view rectangle’s size up to the size of the border box in that axis (where end is interpreted relative to the writing mode of the containing block).

%~box の各~側に対し：［ その側に対応する %~box の`~inset~prop$は `auto$v でない ］かつ［ その側に対応する %~box の`~border辺$は`張付き~view矩形$の対応する辺より外側に来る† ］ときは、 %~box を — `相対~位置決めに対するときと同じく＠#relpos-insets$，視覚的に — その`位置~box$が［ `包含塊$に包含され続ける ］下で［ `張付き~view矩形$の内方へ，できるだけ多く入る（近付く）所 ］まで，ズラすモノトスル。 ◎ For each side of the box, if the corresponding inset property is not auto, and the corresponding border edge of the box would be outside the corresponding edge of the sticky view rectangle, then the box must be visually shifted (as for relative positioning) to be inward of that sticky view rectangle edge, insofar as it can while its position box remains contained within its containing block.＼

【† %~box の各種~辺（~border辺や~margin辺）は包含塊を基準にする一方で，張付き~view矩形は~scrollportを基準にするので、 これらの位置関係は，~scrollされるに伴い変化することに注意。 】【 すなわち，~scrollされて %~box が`張付き~view矩形$の外側に出かかったときは、 できるだけ内側に留まろうとすることになる — その効果は、 `固定d位置決め$に似る。 】

%~box の `位置~box@ は、 %~box の各~側の`~margin$を［ %~box の`~margin辺$【`~border辺$？】から %~box の`包含塊$の対応する辺までの距離 ］以下に切り詰めたとするときの，`~margin~box$になる。 ◎ The position box is its margin box, except that for any side for which the distance between its margin edge and the corresponding edge of its containing block is less than its corresponding margin, that distance is used in place of that margin.

注記： `張付きに位置され$た要素のうち，［ `top$p 値は非 `auto$v, `bottom$p 値は `auto^v ］なるものは、 下へ押出されるのみであり，張付き位置決めにより上方へ~offsetすることは決してない。 ◎ Note: A sticky positioned element with a non-auto top value and an auto bottom value will only ever be pushed down by sticky positioning; it will never be offset upwards.

注記： 同じ容器~内に`張付きに位置され$た~boxが複数ある場合、 それぞれが独立に~offsetするので，それらは重合し得る。 ◎ Note: Multiple sticky positioned boxes in the same container are offset independently, and therefore might overlap.

3.5. 絶対（および固定d）位置決め

`絶対的に位置され$た~boxに対しては、 その`~inset~prop$は，その~sizingと位置決めの基準になる`包含塊$を実質的に指定された量だけ抑制する — 結果の矩形を指して， `~insetで改変された包含塊@ という。 （一義化するため、 絶対的に位置された~boxの実際の【抑制される前の】包含塊は， `絶対~位置の包含塊@ とも呼ばれる†。） ◎ For an absolutely positioned box, the inset properties effectively reduce the containing block into which it is sized and positioned by the specified amounts. The resulting rectangle is called the inset-modified containing block. (For disambiguation, the actual containing block of an absolutely positioned box can also be called the absolute-position containing block.)

【† “`元の包含塊$” と称したい所だが、 それには別の意味が定義されている。 】

4.1. 絶対的に位置された~boxの自動的な~size

`絶対的に位置され$た~box %~box の所与の軸 %軸 における`自動的~size$は、 %~box の`~insetで改変された包含塊$を基準に （`~margin$に対する `auto^v は 0 と扱う下で） 解決される† — それは： ◎ The automatic size of an absolutely positioned box is resolved against its inset-modified containing block as follows (treating auto margins as zero):

• ~OR↓ が満たされるならば %~box の`伸張して収まる~size$になる：

  • %自己-整列~値 ~EQ `stretch$v
  • ~AND↓ ⇒＃ %自己-整列~値 ~EQ `normal$v, %~box は`置換され$ない, %~box は`~table包装~box$でない, %~box の %軸 における`~inset~prop$はどちらも `auto$v でない

  ここで， %自己-整列~値 は、 %~box の %軸 における`自己-整列~prop$の値とする。

  ◎ If its self-alignment property in the relevant axis is stretch ◎ Or if it is normal and the box is non-replaced, not a table wrapper box, and has no auto inset in the relevant axis • Its automatic size is its stretch-fit size.
• ~ELSE_ %~box の`内容が収まる~size$になる。 ◎ Otherwise • Its automatic size is its fit-content size.

【† すなわち、［ 伸張して収まる~size／内容が収まる~size ］を計算するときには、 `可用な空間$として %~box の`~insetで改変された包含塊$を利用し， %~box の`~margin~prop$に対する値 `auto^v は 0 として扱う。 】

ただし， %~box が縦横比を伴う場合、 `縦横比に依存する軸$における`自動的~size$は，代わりに`最大-内容~size$として解決される。 両~軸とも`自動的~size$にされたときの`縦横比に依存する軸$は、［ ~insetが片方の軸に限り `auto$v の場合は その軸／ ~ELSE_ `塊-軸$ ］になる。 `縦横比に依存しない軸$における`自動的~size$は、 上述したとおりに決定される。 ◎ However, if the box has an aspect-ratio, then an automatic size in the ratio-dependent axis is instead resolved as a max-content size. When both axes have an automatic size, if only one axis has an auto inset then that axis is the ratio-dependent axis, else the block axis is the ratio-dependent axis. An automatic size in the ratio-determining axis is determined as above.

`絶対的に位置され$た~boxの`自動的な最小~size$は常に 0 になるとする。 ◎ The automatic minimum size of an absolutely-positioned box is always zero.

注記： ~form~controlのうち，~resizeできるもの （かつ，画像などの`置換され$る要素を直に表現していないもの） は、 ここでは，`置換され$ないものとして扱うことが期待される。 ~HTMLにおいては、 `<input type=image>＠~HEinput#image-button-state-(type=image)$c 以外の~form~controlが，`置換され$ないものとして扱われる。 ◎ Note: To the extent that form controls can be resized (and are not directly representing replaced elements such as images), they are expected to be treated as non-replaced here. In HTML, all form controls other than <input type=image> are treated as non-replaced.

4.2. 絶対的に位置された~boxの自動~margin

`絶対的に位置され$た~box %~box の`~margin$に対する【算出d値】 `auto^v は、 各~軸ごとに，以下に従って解決する — 以下における［ ~size／~margin／~inset~prop ］は，関連な軸における それらを指すとする： ◎ ↓

1. %~box の始端, 終端どちらかの`~inset~prop$は `auto$v の場合 ⇒ 0 になる ◎ If either inset property in the relevant axis is auto, then any auto margins resolve to zero.

2. 他の場合 — 以下における %残りの空間 は［ %~box の`~insetで改変された包含塊$の~sizeから %~box の使用~sizeを引いた結果 ］とする：

   • 両~marginとも `auto^v の場合：

     • ［ 当の軸は %~box の`包含塊$の（`書字~mode$に基づく）`行内-軸$である ］かつ［ %残りの空間 は負である ］場合 ⇒ 始端~marginは 0 になり，終端~marginは %残りの空間 になる
     • 他の場合 ⇒ 両~marginとも %残りの空間 の半分になる
   • 片方の~marginだけ `auto^v の場合 ⇒ その~marginが %残りの空間 になる
   ◎ Otherwise, the remaining space is calculated as the size of its inset-modified containing block in the relevant axis minus the box’s used size in the relevant axis, and this remaining space is divided among any auto margins in the relevant axis. However, (all with respect to the writing mode of the containing block), if in the inline axis the remaining space is negative and both margins are auto, the start margin resolves to zero and the end margin receives the remaining space.

5.1. 絶対的に位置された置換されない要素の横幅

5.2. 絶対的に位置された置換d要素の横幅

`auto^v 値をとる %W を`置換d要素の~sizing$に従って解決した上で、 `前節＠#abs-non-replaced-width$を適用する。 ◎ If height and width both have computed values of auto and the element also has an intrinsic width, then that intrinsic width is the used value of width. ◎ If height and width both have computed values of auto and the element has no intrinsic width, but does have an intrinsic height and intrinsic ratio; or if width has a computed value of auto, height has some other computed value, and the element does have an intrinsic ratio; then the used value of width is: ◎ (used height) * (intrinsic ratio) ◎ If height and width both have computed values of auto, the element has an intrinsic ratio but no intrinsic height or width, and the containing block’s width does not itself depend on the replaced element’s width, then the used value of width is calculated from the constraint equation used for block-level, non-replaced elements in normal flow. ◎ Otherwise, if width has a computed value of auto, and the element has an intrinsic width, then that intrinsic width is the used value of width. ◎ Otherwise, if width has a computed value of auto, but none of the conditions above are met, and then the used value of width becomes 300px. If 300px is too wide to fit the device, user agents should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead. ◎ After establishing the width, in order to position the replaced element, apply the following rules as appropriate. • If both left and right have the value auto, and if the direction property of the element establishing the static-position containing block is ltr, set left to the static position and solve for right; else if direction is rtl, set right to the static position and solve for left. • If left is auto and right is not auto, replace any auto on margin-left or margin-right with 0, then solve for left. • If right is auto and left is not auto, replace any auto on margin-left or margin-right with 0, then solve for right. • If at this point both margin-left and margin-right are still auto, solve the equation under the extra constraint that the two margins must get equal values, unless this would make them negative, in which case when the direction of the containing block is ltr (rtl), set margin-left (margin-right) to 0 and solve for margin-right (margin-left). • If at this point there is an auto remaining, solve the equation for that value. • If at this point the values are over-constrained, ignore the value for either left (in case the direction property of the containing block is rtl) or right (in case direction is ltr) and solve for that value.

5.3. 絶対的に位置された置換されない要素の縦幅

5.4. 絶対的に位置された置換d要素の縦幅

`auto^v 値をとる %H を`置換d要素の~sizing$に従って解決した上で、 `前節＠#abs-non-replaced-height$を適用する。 ◎ If height and width both have computed values of auto and the element also has an intrinsic height, then that intrinsic height is the used value of height. ◎ Otherwise, if height has a computed value of auto and the element has an intrinsic ratio then the used value of height is: ◎ (used width) / (intrinsic ratio) ◎ Otherwise, if height has a computed value of auto and the element has an intrinsic height, then that intrinsic height is the used value of height. ◎ Otherwise, if height has a computed value of auto, but none of the conditions above are met, then the used value of height must be set to the height of the largest rectangle that has a 2:1 ratio, has a height not greater than 150px, and has a width not greater than the device width. ◎ After establishing the height, in order to position the replaced element, apply the following rules as appropriate. • If both top and bottom have the value auto, replace top with the element’s static position. • If bottom is auto, replace any auto on margin-top or margin-bottom with 0. • If at this point both margin-top and margin-bottom are still auto, solve the equation under the extra constraint that the two margins must get equal values. • If at this point there is only one auto remaining, solve the equation for that value. • If at this point the values are over-constrained, ignore the value for bottom and solve for that value.

5.X. 通常~flowの静的~位置

【 この節（この訳による追加）は、 上の各~節にて利用される定義を `CSS2$r から抜き出したものである。 】

~boxの`静的~位置$は、 概ね，~boxが通常~flowに置かれた【`~flow内$にあった】とするときの位置を指す。 より精確には、 `静的~位置~用の包含塊$の各~辺から，`仮の~box$の同じ側にある`~margin辺$までの距離【~inset】として与えられる。 【すなわち、仮の~boxが，`静的~位置~矩形$を与える。】 これらの~offsetは、 仮の~boxが包含塊をはみ出すときは，はみ出した側において負になる。 ◎ For the purposes of this section and the next, the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow. More precisely: ◎ The static-position containing block is the containing block of a hypothetical box that would have been the first box of the element if its specified position value had been static and its specified float had been none.＼ (Note that due to the rules in section 9.7 this hypothetical calculation might require also assuming a different computed value for display.) ◎ The static position for left is the distance from the left edge of the containing block to the left margin edge of a hypothetical box that would have been the first box of the element if its position property had been static and float had been none. The value is negative if the hypothetical box is to the left of the containing block. ◎ The static position for right is the distance from the right edge of the containing block to the right margin edge of the same hypothetical box as above. The value is positive if the hypothetical box is to the left of the containing block’s edge.

しかしながら，~UAは、 `仮の~box$の寸法を実際に計算せずに，確からしい位置を推測してかまわない。 ◎ But rather than actually calculating the dimensions of that hypothetical box, user agents are free to make a guess at its probable position.

【 すなわち、 “仮の” ~layoutを実際に遂行することなく。 】【 CSS2 においては，このように述べられているが、 `§ 自動的な~insetの解決-法＠#staticpos-rect$の記述に従うなら，`仮の~box$は［ `塊~levelの~box$であるならば塊~size（ CSS2 においては縦幅）は 0 ／ `行内~levelの~box$であるならば行内~size（ CSS2 においては横幅）は 0 ］と見なされることになる。 】