CSS 2.2 — 9. 視覚整形モデル

Visual formatting model

9.1. 視覚~整形~model 序論

この章と`次の章$は、 `視覚~整形~model@ — ~UAが視覚的`媒体$に対し `文書~木$をどう~~処理するか — について述べる。 ◎ This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media.

視覚~整形~modelの下では、文書~木 内の各~要素は， ~box~model に則って 0 個~以上の~boxたちを生成する。 これらの~boxたちの~layoutは、次により統制される： ◎ In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

この章と`次の章$で定義される各種~propは、 `連続的~媒体$と 頁d媒体 の両者に適用される。 しかしながら、各種 ~margin~prop の意味は、頁d媒体に適用されるときは変わる（詳細は 頁~model を見よ）。 ◎ The properties defined in this chapter and the next apply to both continuous media and paged media. However, the meanings of the margin properties vary when applied to paged media (see the page model for details).

視覚~整形~modelは、整形のすべての側面までは指定しない（例： アキ組（ `letter-spacing^en ）の~algo）。 `適合~UA$は、この仕様が対象にしていない これらの整形の課題に対しては，挙動を違えてよい。 ◎ The visual formatting model does not specify all aspects of formatting (e.g., it does not specify a letter-spacing algorithm). Conforming user agents may behave differently for those formatting issues not covered by this specification.

9.1.1. 表示域

`連続的~媒体$ 用の~UAは、一般に，利用者が文書とやりとりするための `表示域@ （ `viewport^en — ~screen上の~windowその他の，見えている区画） を提供する。 ~UAは、表示域が~resizeされたときには，文書の~layoutを変更してよい（`初期~包含塊$を見よ）。 ◎ User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document's layout when the viewport is resized (see the initial containing block).

~UAは、表示域が［ ~canvas内の，文書が描画される区画 ］より狭いときは，~scrolling-mechanismを提供するべきである。 表示域は，`~canvas$ごとに高々一つまでであるが、~UAは複数の~canvasに描画してもよい（すなわち、同じ文書に対する複数の~viewを~~同時に供してもよい）。 ◎ When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism. There is at most one viewport per canvas, but user agents may render to more than one canvas (i.e., provide different views of the same document).

9.1.2 包含塊

~CSS_2においては、多くの~boxの位置と~sizeは， `包含塊@ （ `containing block^en ）と呼ばれる矩形の~boxの各~辺を基準に計算される。 一般に、生成された~boxは，子孫~box用の包含塊として動作する。 このことを、~boxは，（その子孫たち用の）包含塊を “確立する” という。 “~boxの包含塊” という句は、 “~boxが確立するそれ” ではなく， “~boxは その包含塊の中に居る” ことを意味する。 ◎ In CSS 2, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.

各~boxには，その包含塊を基準にする位置が与えられるが、この位置は，この包含塊の~~枠内から`~overflow$することもある。 ◎ Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

包含塊の寸法を計算する方法の詳細 は、`次の章$にて述べる。 ◎ The details of how a containing block's dimensions are calculated are described in the next chapter.

9.2. ~box生成の制御法

次の節に、~CSS_2にて生成され得る~boxたちの各種 表示型について述べる。 ~boxの表示型は、`視覚~整形~model$における その挙動に少なからず影響する。 後述の `display$p ~propが，~boxの表示型を指定する。 ◎ The following sections describe the types of boxes that may be generated in CSS 2. A box's type affects, in part, its behavior in the visual formatting model. The 'display' property, described below, specifies a box's type.

【 ~~表示型 （ `display type^en ）という訳語は， CSS Display 仕様に倣ったもの — 原文では単に “型” とされている。 】

9.2.1. 塊levelの要素と塊~box

`塊levelの要素@ とは、視覚的に塊として整形される~source文書の要素である（例： 段落など）。 要素を塊levelにするような `display!p ~propの値には，［ `block$v, `list-item$v, `table$v ］がある。 ◎ Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

`塊level~box@ は、`塊~整形文脈$に関与する~boxである。 各`塊levelの要素$は、 `主要~box@ （ `principal box^en ）と呼ばれる，塊levelの~boxを生成する。 主要~boxが、子孫の~boxと 生成d内容 を包含し、また，`位置決め~scheme$に関わる~boxになる。 塊levelの要素には、`主要~box$の他に追加の~boxを生成させるものもある — `display!p が `list-item$v にされた要素など。 これらの追加の~boxは、`主要~box$を基準に配置される。 ◎ Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme. Some block-level elements may generate additional boxes in addition to the principal box: 'list-item' elements. These additional boxes are placed with respect to the principal box.

【 “関与する”： 言い換えれば、［ `~box木$の中で，~boxの先祖~boxであって, かつ`整形文脈$を確立しているもの ］のうち，~boxに最も近い先祖は、［ 種別が “塊” である`整形文脈$ ］を確立していて，~boxの~layoutは［ その種別の整形文脈に定義される規則 ］により統制される。 】

［ `~table~box$, `置換~要素$ ］を除き，塊levelの~boxは、`塊~容器~box$でもある。 `塊~容器~box@ は、塊levelの~boxのみを包含するか，または `行内~整形文脈$を確立する — すなわち，行内levelの~boxのみを包含する。 `塊~容器~box$には、`塊level$でないものもある — `非置換$［ 行内~塊（ `inline-block$v ） ／ ~table~cell（ `table-cell$v ） ］は塊~容器であるが、塊levelの~boxではない。 塊levelの~boxであって, 塊~容器でもあるものは、 `塊~box@ とも呼ばれる。 ◎ Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.

3 種の用語 “`塊level~box$”, “`塊~容器~box$”, “塊~box” は、多義的にならない所では，単に “塊” と略称されることもある。 ◎ The three terms "block-level box," "block container box," and "block box" are sometimes abbreviated as "block" where unambiguous.

【 `整形文脈$における これらの~boxの役割については、 9.4.X 節 にて，俯瞰する。 】

9.2.1.1. 匿名~塊~box

次の様な文書において： ◎ In a document like this: 

<DIV>
  Some text
  <P>More text
</DIV>

`DIV^e は、行内~内容と塊~内容の両者を持つように現れる（ `DIV^e と `P^e の `display$p はいずれも `block^v とする）。 整形をより定義し易くするため、 "Some Text" の周りには， `匿名の塊~box@ が在るものと見做される。 【それは、`塊~容器$になり, かつ`塊level$であるとされるので、“`塊~box$” と称される。】 ◎ (and assuming the DIV and the P both have 'display: block'), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around "Some text".

Some text 匿名~box
More text P ~box
上の例から生成される 3 つの~box — 外枠の DIV ~boxの中の`匿名~塊~box$（上段）と P ~box（下段） — を示す図式。 ◎ Diagram showing the three boxes, of which one is anonymous, for the example above.

言い換えれば： 内側に`塊level~box$（上の `P^e など）があるような`塊~容器~box$（上の `DIV^e に対し生成されるものなど）は、その内側には`塊level~box$しかないように強制される。 ◎ In other words: if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

`行内~box$ %I が `~flow内$にある`塊level~box$の 連なり を包含する場合：

  1. %I （および %I と同じ`行l~box$に属する %I の行内~先祖）は，その連なりの周りで，分断され、
  2. 分断された前後それぞれの行l~box群（空, すなわち 0 個の行l~boxにもなり得る）は，`匿名~塊~box$に封入される。
  3. これらの `匿名~塊~box$, および その連なりは，互いに同胞になる。 【連なりが複数あれば、合間に生じる各~行l~box群も匿名~塊~boxで包装される。】

ここでの 連なり とは、［ 連続する, または［ `縮約-可能$な`空白$や`~flow外$にある要素 ］のみにより分離される ］ような，互いに同胞の 1 個以上の`塊levelの要素$を意味する。

%I が`相対~位置決め$により~offsetされる場合、その中の（匿名のものも含めた）塊~boxたちも一緒に~offsetされる。

◎ When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) is broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

この~modelは、次の例にも適用されることになる。 次の規則が： ◎ This model would apply in the following example if the following rules: 

p    { display: inline }
span { display: block }

次の~HTMLに利用された場合： ◎ were used with this HTML document: 

<BODY>
<P>
SPAN の前の匿名~text
<SPAN>SPAN の内容</SPAN>
SPAN の後の匿名~text
</P>
</BODY>

`P^e 要素は（`行内level$にされてはいるが）、順に，［ 匿名~text片 %C1, `塊level$にされた `SPAN^e 要素, 別の匿名~text片 %C2 ］を包含する。 結果の~boxたちは、［ 次のものを包含している `BODY^e ］を表現している`塊~box$になる：

  1. %C1 を包装する`匿名~塊~box$
  2. `SPAN^e による`塊~box$
  3. %C2 を包装する別の`匿名~塊~box$
◎ The P element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be a block box representing the BODY, containing an anonymous block box around C1, the SPAN block box, and another anonymous block box around C2.

`匿名~box$の~propは、それを封入している非~匿名~boxから継承される（例： この節の最初の例では、匿名~box "Some text" は，親の `DIV^e から継承する）。 非継承~propについては，それぞれの初期~値にされる。 例えば、匿名~boxの~fontは `DIV^e から継承されるが，~marginは 0 になる。 ◎ The properties of anonymous boxes are inherited from the enclosing non-anonymous box (e.g., in the example just below the subsection heading "Anonymous block boxes", the one for DIV). Non-inherited properties have their initial value. For example, the font of the anonymous box is inherited from the DIV, but the margins will be 0.

［ `匿名~塊~box$を生成させる要素 ］上に設定された各~propは、依然として，それらの~boxと 要素の内容にも適用される。 例えば、上の例で `P^e 要素に~borderが設定されていたなら、~borderは %C1, %C2 の周りにも描かれることになる（この~borderは、［ %C1／ %C2 ］の行lの［ 終端／始端 ］では開いた~~状態になる）。 ◎ Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the P element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).

【上の例の，利用中の~browserによる呈示（この訳による追加）：】

上の例において `P^e に~border（赤線）が設定されているとき — ~borderは，合間の塊を飛ばして描かれるであろう。
SPAN の前の匿名~text SPAN の内容 SPAN の後の匿名~text
一つ前の例で `P^e の `display^p が `block^v であったなら、~borderは単に `P^e の周囲に描かれるであろう。
SPAN の前の匿名~text SPAN の内容 SPAN の後の匿名~text
2 つ前の例から， `SPAN^e の前後の匿名~textを削除したとき — それでも、行l~boxは分割の前後に生成されるであろう。
SPAN の内容
一つ前の例から、更に~border~styleも削除したとき — 行l~boxは（少なくとも見かけ上は）生成されなくなるであろう（ この挙動の説明 ）。
SPAN の内容
一つ前の例に、 `P^e に青い外形線~style（ `outline^p: `blue^v ）を加えたとき — ~layoutは同じになるべきだが、見えない行l~boxにも外形線を描く実装はあるかもしれない。
SPAN の内容

行内 %I が包含している塊~上の~borderを，他の仕方で実装している~UAも中にはある： 例えば、そのような入子の塊を “匿名~行l~box” の内側に包装して、この匿名~boxの周りに %I の~borderを描くような。 ~CSS_1 ／ ~CSS_1998 は，この挙動を定義していないので、この別の~modelを実装するような ~CSS_1 ／~CSS_1998 “のみの” ~UAであっても、~CSS_2のこの部分には適合するものと主張できる。 このことは、この仕様が~~発行された後に開発された~UAには，適用されない。 ◎ Some user agents have implemented borders on inlines containing blocks in other ways, e.g., by wrapping such nested blocks inside "anonymous line boxes" and thus drawing inline borders around such boxes. As CSS1 and CSS2 (1998) did not define this behavior, CSS1-only and CSS2 (1998)-only user agents may implement this alternative model and still claim conformance to this part of CSS 2. This does not apply to UAs developed after this specification was released.

`匿名~塊~box$は、百分率~値を解決する際には，~~参照されずに無視される — 代わりに，先祖の非 `匿名~box$のうち，最も近いものを利用して解決される。 例えば、［ この節の最初の例の `DIV^e の子である`匿名~塊~box$（ "Some Text" ） ］において，百分率による縦幅を解決する際に，その包含塊の縦幅を知る必要があるならば、その匿名~塊~boxの縦幅ではなく， `DIV^e により形成される包含塊の縦幅を利用することになる。 ◎ Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead. For example, if the child of the anonymous block box inside the DIV above needs to know the height of its containing block to resolve a percentage height, then it will use the height of the containing block formed by the DIV, not of the anonymous block box.

9.2.2. 行内levelの要素と行内~box

`行内levelの要素@ は、~source文書の要素であって，その内容により，新たな塊が形成されないものである†。 その内容（例えば、段落の中で強調される~text片, 行内~画像, 等々）は、何~行lかに分布する。 `display!p ~propに対する値［ `inline$v, `inline-table$v, `inline-block$v ］は、要素を行内levelにする。 `行内levelの要素$は、 `行内level~box@ を生成する。 それは、`行内~整形文脈$に関与する~boxである。 ◎ Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

【† 実際には，前節の例のように塊を生成する要素を包含することもあるので、この定義は厳密さに欠く。 】

`行内level~box$は、次の 2 種に大別される：

`行内~box@ 【 “可分な行内” 】
その内容も，~boxが関与している`行内~整形文脈$に関与するもの。 `display$p 値が `inline$v にされた`非置換~要素$は、`行内~box$を生成する。
`不可分な行内@
`行内~box$でないもの（ `行内level$の`置換~要素$が生成する~box ／ `行内-塊$ ／ `行内-~table$ など）。 その名称の由来は、それが単独の 不透明な~box として`行内~整形文脈$に関与することによる。
◎ An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

9.2.2.1. 匿名~行内~box

（行内~要素の内側ではなく）`塊~容器~要素$の内側に直に包含される，どの~textも、`匿名~行内~box$を生成するものとして扱われ~MUST。 ◎ Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

次の様な~HTML~markupを伴う文書において： ◎ In a document with HTML markup like this: 

<p>ある<em>強調された</em>テキスト</p>

`p^e は、その内側にいくつかの`行内~box$たちを伴う`塊~box$を生成する。 "強調された" に対する~boxは，行内~要素（ `em^e ）により生成される`行内~box$であるが、他の~box（ "ある" と "テキスト" ）は，`塊levelの要素$（ `p^e ）により生成される`行内~box$である。 後者の~boxには、結付けられる`行内levelの要素$がないため， `匿名~行内~box@ と呼ばれる。 ◎ the <p> generates a block box, with several inline boxes inside it. The box for "emphasized" is an inline box generated by an inline element (<em>), but the other boxes ("Some" and "text") are inline boxes generated by a block-level element (<p>). The latter are called anonymous inline boxes, because they do not have an associated inline-level element.

そのような`匿名~行内~box$は、その親の塊である~boxから継承-可能な~propを継承する。 非継承~propは、初期~値にされる。 上の例では、`匿名~行内~box$の色は `P^e から継承されるが，背景は透明になる。 ◎ Such anonymous inline boxes inherit inheritable properties from their block parent box. Non-inherited properties have their initial value. In the example, the color of the anonymous inline boxes is inherited from the P, but the background is transparent.

`空白$のみからなる内容は、 `white-space$p ~propに則って`縮約され$て消える場合には，`匿名~行内~box$を生成しない。 【関連事項】 ◎ White space content that would subsequently be collapsed away according to the 'white-space' property does not generate any anonymous inline boxes.

この仕様では、どの`表示型$の匿名~boxを指すのか文脈から明らかな所では、 `匿名~行内~box$, `匿名~塊~box$ のいずれに対しても，単に `匿名~box@ と記される。 ◎ If it is clear from the context which type of anonymous box is meant, both anonymous inline boxes and anonymous block boxes are simply called anonymous boxes in this specification.

~tableを整形する際には、 他の表示型の匿名~box が~~導入される。 ◎ There are more types of anonymous boxes that arise when formatting tables.

9.2.3. 同行見出し（ `run-in^en ）~box

この節は、以前の草案と節~番号を揃えるためにある。 `display$p 用の `run-in@v 値は、今や CSS3（ CSS basic box model 【同行見出し~layout】 ）にて定義される。 ◎ [This section exists so that the section numbers are the same as in previous drafts. 'Display: run-in' is now defined in CSS level 3 (see CSS basic box model).]

9.2.4. `display^p ~prop

◎名 `display@p ◎値 `inline$v | `block$v | `list-item$v | `inline-block$v | `table$v | `inline-table$v | `table-*$t | `none$v ◎初 `inline$v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎媒 すべて ◎算 ~textを見よ ◎表終

この~prop用の各種~値の意味は： ◎ The values of this property have the following meanings:

`block@v
この値は、要素に`塊~box$を生成させる。 ◎ This value causes an element to generate a block box.
`inline-block@v
この値は、要素に`行内level$の`塊~容器$を生成させる。 `inline-block^v の内側は，`塊~box$として整形される一方で、要素それ自身は`不可分な行内$として整形される。 ◎ This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
`inline@v
この値は、要素に一つ以上の`行内~box$を生成させる。 ◎ This value causes an element to generate one or more inline boxes.
`list-item@v
この値は、要素に`主要$`塊~box$に加えて，~marker~boxも生成させる（例： ~HTMLの `LI^e ）。 ~listについて, および その整形の例については、 ~list節 にあたられたし。 ◎ This value causes an element (e.g., LI in HTML) to generate a principal block box and a marker box. For information about lists and examples of list formatting, please consult the section on lists.
`none@v
この値は、要素を 整形~構造 に現れなくさせる（すなわち，視覚的~媒体においては、要素は，~boxを生成せず, ~layoutに効果は及ばなくなる）。 要素のどの子孫も，~boxを生成しなくなり、要素とその内容は，整形~構造から全面的に除去される。 子孫に `display$p ~propを設定しても，この挙動が上書きされることはない。 ◎ This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.
`display^p 値 `none$v は、不可視~boxを作成するものではないことに注意。 それは~boxを全く作成させなくする。 ~CSSには、要素が［ 整形に影響しつつ，それ自身は可視でない【透明な】~box ］を整形~構造~内に生成する仕組みも~~用意されている。 詳細は 可視性~節 にて。 ◎ Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.
`table@v
`inline-table@v
`table-*$t
これらの値は、要素を `table^e 要素の様に挙動させる（ ~table章 に述べられる制約の対象0になる）。 ◎ These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

ここで： 

`table-*@t
    = `table-row-group@v
    | `table-header-group@v
    | `table-footer-group@v
    | `table-row@v
    | `table-column-group@v
    | `table-column@v
    | `table-cell@v
    | `table-caption@v

これらの値の意味は、 ~table~model にて定義される。

【 この `table-*^t は、他から簡潔に参照できるようにするため，訳者が勝手に導入した非公式な値~型である（これらの値は、~table整形文脈により統制される~boxを生成させる）。 】

算出値は、指定値と同じになる — ただし，`有位置$な要素, `浮動~要素$, `根~要素$に対する場合は除く： `display^p, `position^p, `float^p の関係性 を見よ。 ◎ The computed value is the same as the specified value, except for positioned and floating elements (see Relationships between 'display', 'position', and 'float') and for the root element. For the root element, the computed value is changed as described in the section on the relationships between 'display', 'position', and 'float'.

`display$p の`初期~値$は `inline$v とされているが、多くの要素に対し，この値は~UAの 既定の~stylesheet による規則で`上書き$され得ることに注意。 付録の HTML 4 用の ~stylesheetの見本 を見よ。 【HTML5 ~UA ~stylesheet】 ◎ Note that although the initial value of 'display' is 'inline', rules in the user agent's default style sheet may override this value. See the sample style sheet for HTML 4 in the appendix.

ここに `display$p ~propの例をいくつか示す： ◎ Here are some examples of the 'display' property: 

p   { display: block }
em  { display: inline }
li  { display: list-item } 
img { display: none }      /* 
画像は表示させない
◎
Do not display images
 */

9.3. 位置決め~scheme

~CSS_2においては、~boxは，次の３種の `位置決め~scheme@ に則って~lay-outし得る： ◎ In CSS 2, a box may be laid out according to three positioning schemes:

`通常flow$
~CSS_2における通常flowには、［ `塊level~box$の`塊~整形$ ／ `行内level~box$の`行内~整形$ ／ ［ `塊level~box$／`行内level~box$ ］の`相対~位置決め$ ］が含まれる。 ◎ Normal flow. In CSS 2, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
`浮動体$

浮動~modelにおいては、~boxは：

  1. 先ず，`通常flow$に則って~lay-outされてから†
  2. その~flowから外され、可能な限り，左方, または右方 のいずれかへ寄せられる††。
  3. しかる後、周りの内容は，浮動体の脇に~flowし得るようになる†††。

【† すなわち，`現在の行l$を決定する。 】【†† 現在の行lの左端, または右端へ寄せられる。 】【††† 現在の行l 以降に生成される`行l~box$は，浮動体の右, または左に配置される。 】

◎ Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
`絶対~位置決め$
絶対~位置決め~modelにおいては、~boxは，`通常flow$からまるごと除去された上で（後続の内容は~boxが元から無かったかのように~layoutされる）、包含塊を基準に位置が割当される。 ◎ Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

［ `浮動体$ ／ `絶対位置され$た要素 ／ `根~要素$ ］は， `~flow外@ にあると呼ばれ、`~flow外$でない要素は， `~flow内@ にあると呼ばれる。

`~flow@ とは、［ `~flow外$にある，ある要素を根とする部分木 ］から，その中の［ `~flow外$にある要素を根とする部分木 ］すべてを除外した部分である。

【 定義により、要素が`~flow内$にあることと，要素が ある`~flow$に含まれる（その根は除く）ことは、同じことを意味する。 】

◎ An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

注記： ~CSS_2の位置決め~schemeは、~markupによる技巧（例：不可視の画像）を要することなく，~layout効果を得られるようにして、作者が，より~access可能な文書を書き易くするためにある。 ◎ Note. CSS 2's positioning schemes help authors make their documents more accessible by allowing them to avoid mark-up tricks (e.g., invisible images) used for layout effects.

9.3.1. 位置決め~schemeの選択法： `position^p ~prop

`position$p ／ `float$p ~propは、~boxの位置を計算するときに利用される~CSS_2の位置決め~algoを決定する。 ◎ The 'position' and 'float' properties determine which of the CSS 2 positioning algorithms is used to calculate the position of a box.

◎名 `position@p ◎値 `static$v | `relative$v | `absolute$v | `fixed$v ◎初 `static$v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎媒 `視覚的$ ◎算 指定値 ◎表終

この~prop用の各種~値の意味は： ◎ The values of this property have the following meanings:

`static@v
~boxを，`通常flow$に則って~lay-outされる通常の~boxにする。 各種 `~offset~prop$は、適用されなくなる。 ◎ The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.
`relative@v
~boxの位置は、先ず，`通常flow$に則って計算され（これは 通常flowにおける位置と呼ばれる）、次に，その通常の位置から`相対的$に~offsetされるようになる。 ~box %B が相対に位置されるときでも、次の~boxの位置は， %B は~offsetされていないかのように計算される。 `table-*$t 要素~上の `position$p 用の `relative$v 値の効果は、定義されない。 ◎ The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
`absolute@v
~boxの位置（および，場合によっては~size）は、各種 `~offset~prop$で指定される。 これらの~propは、~boxの`包含塊$からの~offsetを指定する。 `絶対位置され$た~boxは、`通常flow$から外される。 これは、後続の内容は~boxが元から無かったかのように~layoutされることを意味する。 `絶対位置され$た~boxも~marginは持ち得るが、他のどの~marginとも`相殺-$されない。 ◎ The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.
`fixed@v

~boxの位置は，`絶対~位置決め$~modelに則って計算されるが、それに加えて，~boxは ある基準から~~相対的に`固定-$される。 絶対~位置決め~modelと同様に、~boxの各~marginは，他のどの~marginとも相殺されない。 ◎ The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins.＼

  • 連続的~媒体においては、~boxは，`表示域$を基準に固定され, ~scrollされても移動しない。 ◎ In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled.＼
  • 印刷-媒体においては、~boxは，毎~頁ごとに描画され, 頁~boxを基準に固定される — 頁が機器の表示域を通して見えていても（例えば、印刷-~previewの事例）。 ◎ In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a print-preview, for example).＼
  • 他の媒体~型~用の呈示は、定義されない。 ◎ For other media types, the presentation is undefined.＼

媒体に依存する仕方で `fixed$v を指定したいと望む作者もあろう。 具体例として，~boxが~screen上の`表示域$の上端に残りつつ，印刷される各~頁の上端には残らないよう欲するならば、この 2 つの指定は @media 規則を利用して分離できる — 次の様に： ◎ Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule, as in: 

@media screen { 
  h1#first { position: fixed } 
}
@media print { 
  h1#first { position: static }
}
~UAは、固定~boxの内容に対しては、頁割してはならない。 注記： ~UAは、不可視~内容を他の仕方で印刷してもよい。 13 章の 内容の外側に来る頁~box を見よ。 ◎ UAs must not paginate the content of fixed boxes. Note that UAs may print invisible content in other ways. See "Content outside the page box" in chapter 13.

~UAは、`根~要素$ 上の `position$p については `static$v として扱ってよい。 【算出値には影響する？しない？】 ◎ User agents may treat position as 'static' on the root element.

9.3.2. ~boxの~offset： `top^p, `right^p, `bottom^p, `left^p

`position$p ~propの値が `static$v でない要素は， `有位置@ な要素と総称される。 有位置な要素は、［ 次の 4 種の~propに則って~lay-outされる，有位置な~box ］を生成する： ◎ An element is said to be positioned if its 'position' property has a value other than 'static'. Positioned elements generate positioned boxes, laid out according to four properties:

◎名 `top@p, `right@p, `bottom@p, `left@p ◎値 `length$t | `percentage$t | `auto$v ◎初 `auto$v ◎適 `有位置$な要素 ◎継 されない ◎百 包含塊の［ 縦幅（ `top^p, `bottom^p の場合）／ 横幅（ `right^p, `left^p の場合） ］を基準にする。 ◎ refer to {height|width} of containing block ◎媒 `視覚的$ ◎算 指定値 — ただし、 `length$t は絶対~長さに換算される。 ◎ if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'. ◎表終

［ `top$p／`right$p／`bottom$p／`left$p ］~propは：

  • `絶対位置され$た~boxに対しては ⇒ ~boxの［ 上端／右端／下端／左端 ］~margin辺が，~boxの`包含塊$の［ 上端~辺から下方 ／ 右端~辺から左方 ／ 下端~辺から上方 ／ 左端~辺から右方 ］へ~offsetされる~~量を指定する。
  • `相対位置され$た~boxに対しては ⇒ 【これらの~propが適用されないときの】 ~boxの［ 上端／右端／下端／左端 ］辺を基準にする（すなわち，~boxの位置は、まず，`通常flow$の下で与えられた上で、その位置から これらの~propに則って~offsetされる）。
◎ This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties). ◎ Like 'top', but specifies how far a box's right margin edge is offset to the left of the right edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the right edge of the box itself. ◎ Like 'top', but specifies how far a box's bottom margin edge is offset above the bottom of the box's containing block. For relatively positioned boxes, the offset is with respect to the bottom edge of the box itself. ◎ Like 'top', but specifies how far a box's left margin edge is offset to the right of the left edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the left edge of the box itself.

これらの~prop用の各種~値の意味は： ◎ The values for the four properties have the following meanings:

`length$t
~offsetは、基準~辺からの固定的な距離。 負の値も許容される。 ◎ The offset is a fixed distance from the reference edge. Negative values are allowed.
`percentage$t
~offsetは、包含塊の［ 横幅（ `left$p, `right$p の場合）／ 縦幅（ `top$p, `bottom$p の場合） ］に対する百分率。 負の値も許容される。 ◎ The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). Negative values are allowed.
`auto@v

この値の効果は：

  • `非置換~要素$に対しては，関係するどの~propの値が `auto^v にされているかどうかに依存する。 詳細は、`絶対位置され$た`非置換~要素$に対する 横幅 ／ 縦幅 各~節を見よ。
  • `置換~要素$に対しては、置換~内容の`内在的~寸法$のみに依存することになる。 詳細は、`絶対位置され$た`置換~要素$に対する 横幅 ／ 縦幅 各~節を見よ。
◎ For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details. For replaced elements, the effect of this value depends only on the intrinsic dimensions of the replaced content. See the sections on the width and height of absolutely positioned, replaced elements for details.

9.4. 通常flow

通常flow（ `normal flow^en ）における~boxは、塊, 行内いずれかの `整形文脈@ （ `formatting context^en ）に所属する【関与する】 — が、これら 2 つに同時に所属することはない。 `塊level$の~boxは、`塊~整形文脈$に関与する。 `行内level$の~boxは、`行内~整形文脈$に関与する。 ◎ Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

9.4.X. 【塊~整形文脈における各種~boxの~~位置付け】

【 この節は、訳者による注釈である。 】

この節では、この仕様が定義する各種~boxの，整形文脈における~~位置付けについての（ CSS3 も視野に入れた）説明を試みる（この節は、何かを定義するものではない）。 尚、ここでは`主要~box$でない~boxは~~脇に置く。

視覚的な~layoutは、~boxたちが成す階層的な木~構造に基いて行われる。 これは、`~box木$, あるいは描画~木とも呼ばれている（これは，概ね文書~木の構造を反映するが、文書~木の一部は，~box木の中では別の場所に組み替えられることもある — `絶対位置され$た要素など）。 整形文脈は、この~box木の中のある部分木を表現する。 上述の様に，整形文脈にはいくつかの種別があり、ある整形文脈に関与する~boxの~layoutは，その種別に定義される規則により統制される。

整形文脈の部分木の中で，新たな整形文脈を確立するものは、親の整形文脈の視点からは，末端の（ “不透明な” ）~boxになる。 すなわち、子孫の整形文脈に関与する内容の~layoutには，親の整形文脈による統制は及ばない — 及ぶのは、子~整形文脈の根である末端~boxの~size／位置に限られる。 一般に、~CSSに規定される~layout特色機能のほとんどは，整形文脈を超えて影響しあうことはない（`浮動体$は、塊~整形文脈と行内~整形文脈との間で影響しあう点で特別だが）。

この仕様が定義する`塊~整形文脈$を成す部分木においては：

  • 根~自身が末端でないときは：

    • 根~以外のすべての~boxは、`塊level~box$である。 そのうち，`浮動~box$のみが`~flow外$にある。
    • 末端~以外のすべての~boxは、（`塊level~box$を包含する方の）`塊~容器$である。
    • よって、末端でも根でもない すべての~boxは，`塊~box$になる。

  • 末端の~boxは、次の３種に大別される：

    • `行内~整形文脈$を確立するもの（塊level~boxを包含しない方の`塊~容器~box$）。 次項に該当しない，内容が空の~boxは、形式的に［ 0 個の`行l~box$を生成する`行内~整形文脈$を確立する ］ものと見做した下で、ここに分類される。
    • 行内~整形文脈でない`整形文脈$を確立するもの — 例えば、~table~layout, あるいは ~flex~layoutなどの CSS3 で定義される各種~整形文脈。 塊~整形文脈も末端に入子にされ得る。 `overflow$p が `visible^v でないものや，`浮動~box$は、ここに分類される。
    • 置換~要素。 （言い換えれば、 “~CSSからは未知の整形文脈” を確立するもの。）
  • 根~boxは、別の整形文脈の末端であるか，~box木~全体（根~要素が確立する整形文脈）の根になる。 親の整形文脈が`行内~整形文脈$である（したがって，`行内level~box$である）ような 根~boxは、特に，`不可分な行内$と呼ばれ、複数の行l~boxに分断されて~flowされることはない。

`行内~整形文脈$は、常に，`塊~整形文脈$を親の整形文脈に持ち、他の整形文脈（行内~整形文脈も含む）の中では，`塊~整形文脈$を介してのみ現れる点で，特別な地位にある。 言い換えれば、“塊level”／“行内level” の区別が意味を成すのは，`塊~整形文脈$の下に限られる — 他の種別の`整形文脈$の下での行内level~boxは、常に塊~整形文脈の中に包装されるので（塊~整形文脈と，その子である行内~整形文脈もひっくるめたものは、 ~flow~layout とも呼ばれている）。 また、 “塊~容器” という用語は，塊~整形文脈の存在を含意することになる。 加えて，塊／行内~整形文脈でない整形文脈においては、通例，~boxが浮動されることもないことになる（ `float$p を非 `none^v に設定しても~~効果はない） — その文脈~下での挙動が新たに定義されない限り。 したがって、浮動という用語も，塊~整形文脈の存在を含意することになる。

9.4.1. 塊~整形文脈

次のものは、その内容に対し，新たな`塊~整形文脈$を確立する：

  • `浮動体$
  • `絶対位置され$た要素
  • `塊~容器$（ `inline-block^v, `table-cell^v, `table-caption^v など）であって，`塊~box$でないもの 【言い換えれば、塊~整形文脈でない整形文脈の中に置かれた塊~容器】
  • `塊~box$であって， `overflow$p は `visible^v でないもの（その値が`表示域に伝播され$たものであるときは除く）
◎ Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

`塊~整形文脈$の下では、各~boxは，包含塊の上端から, 縦方向に, 順々に，~lay-outされる。 2 つの同胞~boxの縦方向の~~間隔は、それらの `margin$p ~propにより決定される。 同じ`塊~整形文脈$に関与する，隣り合う`塊level~box$では、その合間の縦方向~marginは，`相殺-$される。 ◎ In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

`塊~整形文脈$の下では、各~boxの左端~外縁~辺は， 包含塊の左端~辺に接する（右横書き整形に対しては右端~辺どうしが接する）。 このことは、`浮動体$が存在していても成り立つ（~box内の `行l~box$ は、浮動体に因り縮短され得るが） — その~boxが，新たな`塊~整形文脈$を確立するのでない限り（この場合、~box自身は，浮動体に因り より幅狭になり得る ）。 ◎ In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

頁d媒体における頁~分断については、 許容される頁~分断 節にあたられたし。 ◎ For information about page breaks in paged media, please consult the section on allowed page breaks.

9.4.2. 行内~整形文脈

行内~整形文脈の下では、~boxたちは，その包含塊の上端から, 横方向に，順々に~lay-outされていく。 これらの~boxの合間の横方向［ ~margin ／ ~border ／ ~padding ］は、尊重される†。 一連の~boxが縦方向に整列される仕方は、様々になり得る： それらの下端／上端が，互いに整列されることもあれば、それらの~textの基底線が 互いに整列されることもある。 ある一つの行lを形成する~boxたちを包含する矩形の区画は、 `行l~box@ と呼ばれる。 ◎ In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

【† 行内levelの非置換~要素には、縦方向の~marginは適用されない。 また、 ~border ／ ~padding は縦方向でも適用されるが，いずれも行l~boxの縦幅に影響しない（下に例を示す）。 】

`行l~box$の横幅は、その`包含塊$と, `浮動体$の有無により決定される。 `行l~box$の縦幅は、`行l縦幅の計算$ 節にて与えられる規則から決定される。 ◎ The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.

`行l~box$の高さは、常に，それを形成しているすべての~boxを包含するに十分な高さにされる。 しかしながら，この高さは、それらの~boxの高さの最大よりも高くなる場合もある（例えば、~boxたちが互いの基底線が~~揃うように整列されている場合）。 ~box %B の縦幅が`行l~box$より狭い場合の，その行l~boxの中での %B の縦方向の整列は、 `vertical-align$p ~propにより決定される。

`行内level~box$たちが単独の`行l~box$の中に横方向に収まり切らない場合、それらのうち収まり切らない部分は，次の`行l~box$に折り返され 【これは、1 個の行内level~boxを複数の~boxに分割し得る】 、縦方向に堆積されていく。 したがって、段落は，縦方向に堆積する`行l~box$たちからなる。 `行l~box$たちが堆積されるときは、（他から指定されない限り）縦方向に離されることなく，また 重合することも決してない。

◎ A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property. When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxes. Line boxes are stacked with no vertical separation (except as specified elsewhere) and they never overlap.

一般に、`行l~box$の［ 左端~辺／右端~辺 ］は，その包含塊の［ 左端~辺／右端~辺 ］に接する。 しかしながら、包含塊の辺と`行l~box$辺の合間に，浮動~boxが来ることもある。 したがって、同じ`行内~整形文脈$ 内の`行l~box$たちの横幅は，一般的には同じ（包含塊の横幅）になるが、横方向に可用な空間が`浮動体$に因り抑制される場合には，変わり得ることになる。 また、一般に，同じ`行内~整形文脈$に関与する各`行l~box$の縦幅も，まちまちになり得る（例：背が高い画像を包含する行lと, ~textのみを包含する行lなど）。 ◎ In general, the left edge of a line box touches the left edge of its containing block and the right edge touches the right edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same width (that of the containing block), they may vary in width if available horizontal space is reduced due to floats. Line boxes in the same inline formatting context generally vary in height (e.g., one line might contain a tall image while the others contain only text).

同じ`行l~box$上にある一連の`行内level~box$の横幅の合計が，その行l~boxの横幅より狭い場合、その行l~boxにおける，それらの横方向の分布は、 `text-align$p ~propにより決定される。 その~propの値が `justify^v 【 “両端揃え” 】 ならば、~UAは，`行内~box$（ただし， `inline-table^v ／ `inline-block^v ~boxは除く）内の~spaceや単語を伸張してよい。 ◎ When the total width of the inline-level boxes on a line is less than the width of the line box containing them, their horizontal distribution within the line box is determined by the 'text-align' property. If that property has the value 'justify', the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.

`行l~box$の横幅を超過するような`行内~box$は、複数の`行l~box$にわたるように，いくつかの~boxに分割される。 分割できない`行内~box$は、`行l~box$を~overflowする（例： 単独の文字からなる`行内~box$ ／ 言語に特有の単語~分断~規則から `行内~box$の中での分断【 “~~改行” 】が許容されていない ／ `行内~box$に対する `white-space$p 値が `nowrap^v または `pre^v にされている）。 ◎ When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g., if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.

`行内~box$が分割されるとき、どの分割-の切り口の所でも，［ ~margin ／ ~border ／ ~padding ］は 視覚的な効果を持たない。 ◎ When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).

`行内~box$は、`双方向的~text$~~処理に因り， 同じ`行l~box$の中であっても，複数の~boxに分割されることもある。 ◎ Inline boxes may also be split into several boxes within the same line box due to bidirectional text processing.

`行l~box$は、`行内~整形文脈$の中で，`行内level$の内容を保持する必要に応じて作成される。 次のいずれも包含しないような`行l~box$は…：

  • 空でない~text — `保全済み空白$も含め†
  • 非 0 の【横方向の】††［ ~margin, ~padding, ~border ］いずれかを伴う`行内~要素$
  • `~flow内$にある内容（画像, `行内-塊$, `行内-~table$など）

…は：

  • その内側にある要素†††の位置を決定する目的††††においては，縦幅 0 の`行l~box$として扱われ~MUST。
  • 他の目的においては、存在しないものとして扱われ~MUST。
◎ Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

【† この “空白” には，（保全済み）改行文字も含まれる。 】【†† この 0 は、横方向~margin用の `auto^v 値も含む（行内~要素に対しては，その使用値は 0 になるので）。 また、縦方向の［ ~margin, ~padding, ~border ］は何であれ，上の条件に影響しない（それは、 行l~boxの縦幅に影響しない ので）。 】【††† その行l~boxを生成させた要素の，子孫が生成する~box。 】【†††† 例えば、`浮動体$の`現在の行l$の位置。 】

`行内~box$の構築~例をここに示す。 （ ~HTML `塊levelの要素$ `P^e で作成された）次の段落は、合間に［ `EM^e, `STRONG^e ］要素が挟まれた，匿名~textを包含している： ◎ Here is an example of inline box construction. The following paragraph (created by the HTML block-level element P) contains anonymous text interspersed with the elements EM and STRONG: 

<P>いくつかの<EM>強調された単語</EM>が，
<STRONG>この文の中</STRONG>に現れています。</P>
◎
<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>

`P^e 要素は、`塊~box$を生成する。 それは、 5 つの`行内~box$を包含し，うち 3 つは匿名である： ◎ The P element generates a block box that contains five inline boxes, three of which are anonymous:

  • 匿名： "いくつかの"
  • `EM^e： "強調された単語"
  • 匿名： "が，"
  • `STRONG^e： "この文の中"
  • 匿名： "に現れています。"
◎ Anonymous: "Several" EM: "emphasized words" Anonymous: "appear" STRONG: "in this" Anonymous: "sentence, dear."

~UAは、段落を整形するときに，これら 5 ~boxをいくつかの`行l~box$の中へ~flowする。 この例では、 `P^e 要素により生成される~boxが、これらの`行l~box$用に包含塊を確立する。 この包含塊が，すべての`行内~box$に足るほど幅広であれば、単独の`行l~box$に収まることになる： ◎ To format the paragraph, the user agent flows the five boxes into line boxes. In this example, the box generated for the P element establishes the containing block for the line boxes. If the containing block is sufficiently wide, all the inline boxes will fit into a single line box: 

いくつかの強調された単語が，この文の中に現れています。
◎
Several emphasized words appear in this sentence, dear.

そうでなければ、一部の`行内~box$が分割され、いくつかの`行l~box$にまたがることになる。 段落は、例えば次のように分割される： ◎ If not, the inline boxes will be split up and distributed across several line boxes. The previous paragraph might be split as follows: 

いくつかの強調された単語が，
この文の中に現れています。
◎
Several emphasized words appear
in this sentence, dear.

あるいは次の様に： ◎ or like this: 

いくつかの強調された
単語が，この文の中
に現れています。
◎
Several emphasized  
words appear in this 
sentence, dear.

前の例では、 `EM^e ~boxは， 2 つの `EM^e ~boxたちに分割された（以下 `前半^V, `後半^V と記す）。 この~box用の［ ~margin, ~border, ~padding, ~text装飾 ］は、［ `前半^V の~~終端 ／ `後半^V の~~始端 ］に対しては可視~効果を持たない。 ◎ In the previous example, the EM box was split into two EM boxes (call them "split1" and "split2"). Margins, borders, padding, or text decorations have no visible effect after split1 or before split2.

上の例の `EM^e 要素に、次の~styleが適用されたとする： ◎ Consider the following example: 

EM {
  padding: 2px;
  margin: 1em;
  border: medium dashed green;
  line-height: 2.4em;
  background: yellow;
}

`P^e の横幅に依存して、~boxたちは，例えば次のように分布する： ◎ Depending on the width of the P, the boxes may be distributed as follows:

いくつかの強調された単語が，この文の中に現れています。
←
段落の内縁~横幅
→
　
~margin, ~border, ~paddingの表示に対する，行l分断の効果を示す図（利用中の~browserによる呈示）。 ◎ Image illustrating the effect of line breaking on the display of margins, borders, and padding.
  • "強調された単語" は、`前半^V, `後半^V の 2 つの~boxに分断され， `後半^V は次の行lに折り返されている。
  • `前半^V ／ `後半^V を含む行l~boxの縦幅は、 `EM^e ~boxによる縦幅（ `line-height^p ） `2.4em^v になる（図では，ちょうど `前半^V の~borderと `後半^V の~borderの下端の間隔に等しくなる）。
  • ~marginは， `前半^V の前 ／ `後半^V の後 に挿入される。 ◎ The margin is inserted before "emphasized" and after "words".
  • ~paddingは、 `前半^V の［ 前, 上, 下 ］, および `後半^V の［ 後, 上, 下 ］に挿入される。 いずれにせよ，点線（ `dashed^v ）の~borderは 3 側に描画される。 ◎ The padding is inserted before, above, and below "emphasized" and after, above, and below "words". A dashed border is rendered on three sides in each case.
  • 【 `可分な行内$に対しては、縦方向の［ ~margin ／ ~border ／ ~padding ］は，行l~boxの縦幅に影響しない（次の図）。 】
前に現れる内容は、後続の~textの背景と~borderで覆われるかもしれない。
いくつかの強調された単語が，この文の中に現れています。
上の例から，縦方向についてのみ［ ~margin, ~border, ~padding ］を増やしたときの，利用中の~browserによる呈示。

9.4.3. 相対~位置決め

`通常flow$に則って~lay-outされた, または浮動された~boxは、その位置から相対的にズラすことも可能になる。 これは、 `相対~位置決め@ と呼ばれる。 ~boxをこの仕方で~offsetしても、~boxの外の内容は，~boxが~offsetされなかったかのように~layoutされ，その位置が改められることはない。 ゆえに、相対~位置決めにより，~boxどうしが重合することもあり得ることになる。 ただし、相対~位置決めにより要素が［ `overflow$p が `auto^v ／ `scroll^v にされた~box ］を~overflowする場合、~UAは，利用者が要素~内容に~accessできるようにし~MUST（その~offset位置を改めることなく†） — それは、~scrollbarの作成を通して~layoutに影響し得る。 【†とは言え、過度に大きい~offsetは，実装の都合により ある上限に切り下げられるであろう。】 ◎ Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap. However, if relative positioning causes an 'overflow:auto' or 'overflow:scroll' box to have overflow, the UA must allow the user to access this content (at its offset position), which, through the creation of scrollbars, may affect layout.

`相対位置され$た~boxは、その内容の~layoutも含め，その`通常flow$時の~sizeをそのまま保つ。 `相対位置され$た~boxがいつ新たな`包含塊$ を確立するかは， 包含塊 節 にて説明される 【包含塊 節？】。 ◎ A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it. The section on containing blocks explains when a relatively positioned box establishes a new containing block.

`相対位置され$た要素に対する［ `left$p ／ `right$p ］は、要素が生成する~box（たち）を［ 右方／左方 ］へ移動させる。 これにより，~boxが 分割されたり~sizeが変わることはないので、この 2 つの使用値の和は常に 0 になる。 ◎ For relatively positioned elements, 'left' and 'right' move the box(es) horizontally, without changing their size. 'Left' moves the boxes to the right, and 'right' moves them to the left. Since boxes are not split or stretched as a result of 'left' or 'right', the used values are always: left = -right.

これらの使用値は，次の表で与えられる — ここで、［ %L ／ %R ］は［ `left$p ／ `right$p ］の算出値， %D は `包含塊$の `direction$p ~propの算出値を表すとする：

%L %R %D `left$p の
使用値 		`right$p の
使用値 		備考
`auto^v `auto^v 任意 0 0 ~boxは元々の位置に居座る
非 `auto^v `auto^v 任意 +%L −%L ~boxは %L だけ右へ移動する
`auto^v 非 `auto^v 任意 −%R +%R ~boxは %R だけ左へ移動する
非 `auto^v 非 `auto^v `ltr^v +%L −%L 拘束過多： %R は無視される
非 `auto^v 非 `auto^v `rtl^v −%R +%R 拘束過多： %L は無視される
◎ If both 'left' and 'right' are 'auto' (their initial values), the used values are '0' (i.e., the boxes stay in their original position). ◎ If 'left' is 'auto', its used value is minus the value of 'right' (i.e., the boxes move to the left by the value of 'right'). ◎ If 'right' is specified as 'auto', its used value is minus the value of 'left'. ◎ If neither 'left' nor 'right' is 'auto', the position is over-constrained, and one of them has to be ignored. If the 'direction' property of the containing block is 'ltr', the value of 'left' wins and 'right' becomes -'left'. If 'direction' of the containing block is 'rtl', 'right' wins and 'left' is ignored.

次の 3 規則は、等価になる： ◎ Example. The following three rules are equivalent: 

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 }

`相対位置され$た要素に対する［ `top$p ／ `bottom$p ］は、要素が生成する~box（たち）を［ 上方／下方 ］へ移動させる。 これにより，~boxが分割されたり~sizeが変わることはないので、この 2 つの使用値の和は常に 0 になる。

これらの使用値は，次の表で与えられる — ここで、［ %T ／ %B ］は［ `top$p ／ `bottom$p ］の算出値を表すとする：

%T %B `top$p の使用値 `bottom$p の使用値 備考
`auto^v `auto^v 0 0 ~boxは元々の位置に居座る
非 `auto^v `auto^v +%T −%T ~boxは %T だけ下へ移動する
`auto^v 非 `auto^v −%B +%B ~boxは %B だけ上へ移動する
非 `auto^v 非 `auto^v +%T −%T 拘束過多： %B は無視される
◎ The 'top' and 'bottom' properties move relatively positioned element(s) up or down without changing their size. 'Top' moves the boxes down, and 'bottom' moves them up. Since boxes are not split or stretched as a result of 'top' or 'bottom', the used values are always: top = -bottom. If both are 'auto', their used values are both '0'. If one of them is 'auto', it becomes the negative of the other. If neither is 'auto', 'bottom' is ignored (i.e., the used value of 'bottom' will be minus the value of 'top').

注記： ~scriptにより，`相対位置され$た~boxたちを動的に動かせば、~animation効果を生産することもできる（ `visibility$p ~propも見よ）。 `相対~位置決め$は，［ 上付き文字／下付き文字 ］形を得るためにも利用できるが、その位置決めが考慮されて，行l縦幅が自動的に調整されることはない。 更なる情報は、`行l縦幅の計算$を見よ。 ◎ Note. Dynamic movement of relatively positioned boxes can produce animation effects in scripting environments (see also the 'visibility' property). Although relative positioning may be used as a form of superscripting and subscripting, the line height is not automatically adjusted to take the positioning into consideration. See the description of line height calculations for more information.

`相対~位置決め$の例は、 通常flow, 浮動体, 絶対~位置決めの比較 節にて供される。 ◎ Examples of relative positioning are provided in the section comparing normal flow, floats, and absolute positioning.

9.5. 浮動体

`浮動体@（ float — “浮動された（ `floated^en ）” ／ “浮動（ `floating^en ）” ~boxとも称される）は、`現在の行l$において，［ 左端, または右端 ］へ寄せられる~boxである。 浮動体の最も興味を引く特徴は、その周りの内容が，浮動体の脇に沿って~flowし得るようになることである（また、 `clear$p ~propにより，それを禁止することもできる）。 周りの内容は、左方へ浮動された~boxに対しては，その右~脇から下へ~flowし、右方へ浮動された~boxに対しては，左~脇から下へ~flowする。 以下は、浮動体の位置決めと内容~flowの序論である — 浮動体の挙動を統制する正確な規則 は、 `float$p ~propの記述にて与えられる。 ◎ A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the 'float' property.

【 原文には、明示的に定義されていないが： 】

浮動された~boxは、その外縁~辺が［ 包含塊の辺, または［ その~boxに`先行する$別の浮動~boxがあるならば，その外縁~辺 ］］に接するまで、左方へまたは右方へ寄せられる。 浮動される~boxの上端 `外縁~辺$は、`現在の行l$の上端に整列される。 ◎ A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

浮動体の脇に~flowされる内容に対し，横方向の部屋が十分でない場合、内容は［ 何らかの内容を収められるようになるか, または 浮動体を過ぎる所 ］まで，下方へズレる。 ◎ If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

浮動体は`~flow内$にないので、浮動~boxの 前／後 に作成される，`有位置$でない`塊~box$は、浮動体が存在しなかったかのように縦方向に~flowする†。 しかしながら、［ 浮動体の`側方$に重合する，`現在の行l$ 以降の`行l~box$ ］は、浮動体の~margin~boxが占める部屋に必要とされるだけ短縮される。 ◎ Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

【† すなわち、浮動体に後続する塊~boxの位置と~size自体は，浮動体が無かったかのように決定され、浮動体は，塊~boxの中に入り込むように配置され、塊~boxの行内~内容は，浮動体の脇に~flowする。 次の例の様に： 】

【この例は，この訳による追加。】 
<div style="border:solid blue 4px;">
  <div style="float:left; background:silver;">左へ浮動する内容</div>
  <div style="border:solid red 1px; margin: 0.5em;">
    浮動体に後続する塊~box内の，行内~内容
  </div>
</div>
左へ浮動する内容
浮動体に後続する塊~box内の，行内~内容
利用中の~browserによる，上の~HTMLの実際の呈示。

外側の `div^e の内縁~辺（この例では図の青線の内縁）が、当の塊~box用の包含塊になる。 塊~boxの~border（図の赤線）は、浮動体の有無に関わらず，包含塊の横幅のほとんど（~marginを除いた部分）を占めることになる。 `現在の行l$は、塊~boxの上端~外縁~辺（包含塊の上端）に概念的に存在する，縦幅 0 の行l~boxと見なされる。

浮動体の `側方@ とは、浮動体の上端~margin辺から下端~margin辺まで（両端は含まない）を占める，横幅~無限の区画である。 ◎ A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.

【 この訳では、原文による “側方” （ “a shortened line box is next to a float” ）の定義を，行l~box以外の対象にも転用できるように一般化した上で，この用語を利用する他の定義も 等価な言い回しに変換している。 】

注記： 外縁~縦幅が 0 以下の浮動体に対しては、その`側方$は空になるので，`行l~box$は短縮されないことになる。 ◎ Note: this means that floats with zero outer height or negative outer height do not shorten line boxes.

`行l~box$が短縮されるとき，その中に~flowされる内容を包含するには短か過ぎる場合、`行l~box$は，［ 何らかの内容を収められるようになるか, または 浮動体の`側方$を過ぎる所 ］まで、下方へズレる（それに伴い，その横幅も再算出される）。 そうでなければ、浮動~boxが浮動されないとするとき，`現在の行l$に~flowされることになる内容は、書字方向（ `direction$p ）に関わらず，~boxが浮動する方向の反対~側に~flowし直される。 ◎ If a shortened line box is too small to contain any content, then the line box is shifted downward (and its width recomputed) until either some content fits or there are no more floats present. Any content in the current line before a floated box is reflowed in the same line on the other side of the float. In other words, if inline-level boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline-level boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.

次に挙げる要素の~border~boxは、要素~自身と同じ`塊~整形文脈$に関与する どの`浮動体$の~margin~boxとも重合してはならない：

  • ~table
  • `塊level$の`置換~要素$
  • `通常flow$にて，新たな`塊~整形文脈$を確立するような要素（ `overflow$p が `visible^v でない要素など）

実装は、これらの要素をそのように配置する際には，必要に応じて 次を行うべきである：

  • 要素を，それに`先行する$どの浮動体よりも下に配置する。
  • ただし、空間が足りるなら、要素を それらの浮動体の隣に配置してもよい — その際には要素の~border~boxを 10.3.3 節 に定義されるものより幅狭にしてもよい。 【浮動体が要素の`~clear対象$である場合、この選択肢はない。】

~UAが要素をいつ浮動体の`側方$に置くか, あるいは 要素が どの程度 より幅狭になれるかについては、~CSS_2では定義されない。

◎ The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS 2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

次の文書~断片において、包含塊は，その内容を浮動体の`側方$に包含するには幅狭~過ぎるので、内容は浮動体の下に移動される。 ◎ Example. In the following document fragment, the containing block is too narrow to contain the content next to the float, so the content gets moved to below the floats where it is aligned in the line box according to the text-align property. 

p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }
... 
<p>
  <span>浮動体</span>
  Supercalifragilisticexpialidocious
</p>

この断片は、次の様になるであろう： ◎ This fragment might look like this:

浮動体
Supercalifragilisticexpialidocious
分断できない内容~片が，浮動体の`側方$に収まり切らないとき、その下へ~flowし直される効果を示す図。 ◎ Image illustrating the effect of an unbreakable piece of content being reflowed to just after a float which left insufficient room next to it for the content to fit.
【この例は，この訳による追加。】 
<div style="border:solid black 1px; width:20em;">
  浮動体の現在の行lに配置される行内~内容は、浮動する方向
  <em style="float:left;">（左~浮動体）</em>
  の反対~側に~flowし直される。
</div>

文書は左横書きとする。 文書~内で左~浮動体より先に現れる内容であっても，現在の行lに配置される部分は、浮動体が左へ浮動するに伴い，その右~脇へ移動することになる：

浮動体の現在の行lに配置される行内~内容は、浮動する方向 （左~浮動体） の反対~側に~flowし直される。
利用中の~browserによる，上の~HTMLの実際の呈示。
浮動体の現在の行lに配置される行内~内容は、浮動する方向 （右~浮動体） の反対~側に~flowし直される。
上の例の 左~浮動体 を 右~浮動体（ `float$p: `right^v ）に変えたときの呈示。

複数の浮動体が，同じ行l上で互いに隣接し得る — この~modelは、それらの浮動体にも適用される。 ◎ Several floats may be adjacent, and this model also applies to adjacent floats in the same line.

【この例は，この訳による追加。】

次の行内levelの内容に対し：

い~_fRろは~_fLに~_fLほへ~_fRと~_fLち~_fLり~_fRぬる~_fLを~_fLわ~_fRか~_fLよ~_fRた~_fLれ~_fRそ~_fLつね~_fRな~_fR~_fLら~_fRむ~_fLう~_fLゐ~_fRの~_fLお~_fRく~_fLや~_fL~_fRま~_fLけ~_fRふ~_fLこ~_fRえ~_fLて~_fRあ~_fRさ~_fLき~_fRゆ~_fRめ~_fLみ~_fRしゑ~_fRひも~_fLせ~_fRす

文字 “~_fL” は左に浮動させ（ `float$p は `left^v ），文字 “~_fR” は右に浮動させた（ `right^v ）とする。 複数の浮動体が同じ行lに配置され、同じ行lにて，浮動体の前／後に現れる~textは、浮動体の反対~側の脇に~flowし直される：

い~_fRろは~_fLに~_fLほへ~_fRと~_fLち~_fLり~_fRぬる~_fLを~_fLわ~_fRか~_fLよ~_fRた~_fLれ~_fRそ~_fLつね~_fRな~_fR~_fLら~_fRむ~_fLう~_fLゐ~_fRの~_fLお~_fRく~_fLや~_fL~_fRま~_fLけ~_fRふ~_fLこ~_fRえ~_fLて~_fRあ~_fRさ~_fLき~_fRゆ~_fRめ~_fLみ~_fRしゑ~_fRひも~_fLせ~_fRす
利用中の~browserによる呈示。

上の例から更に，すべての浮動体に下端~borderを加えて縦幅を増やした場合 — 浮動体は、`先行する$他の浮動体の`側方$に~~空きがある限り，なるべく上方へ寄せられる：

い~_fRろは~_fLに~_fLほへ~_fRと~_fLち~_fLり~_fRぬる~_fLを~_fLわ~_fRか~_fLよ~_fRた~_fLれ~_fRそ~_fLつね~_fRな~_fR~_fLら~_fRむ~_fLう~_fLゐ~_fRの~_fLお~_fRく~_fLや~_fL~_fRま~_fLけ~_fRふ~_fLこ~_fRえ~_fLて~_fRあ~_fRさ~_fLき~_fRゆ~_fRめ~_fLみ~_fRしゑ~_fRひも~_fLせ~_fRす
利用中の~browserによる呈示。

次の規則は、 class="icon" を伴うすべての `IMG^e ~boxを左方へ浮動させる（加えて，左端~marginも `0^v に設定する）： ◎ The following rule floats all IMG boxes with class="icon" to the left (and sets the left margin to '0'): 

img.icon { 
  float: left;
  margin-left: 0;
}

次の~HTML~sourceと~stylesheetを考える： ◎ Consider the following HTML source and style sheet: 

<BODY>
  <P><IMG src=img.png alt="浮動する画像">
     これは見本の~textであって、...
</BODY>

~CSS： 

IMG { float: left }
BODY, P, IMG { margin: 2em 1em; }

`IMG^e ~boxは左方へ浮動される。 後続する内容は、浮動体の右方に，浮動体の`現在の行l$から開始するように整形される。 浮動体の右方に来る`行l~box$たちは、浮動体の存在に因り短縮されるが、浮動体を過ぎて以降は， “通常の” 横幅（ `P^e 要素により確立される包含塊のそれ）に戻る。 この文書は、次の様に整形されるであろう： ◎ The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. The line boxes to the right of the float are shortened due to the float's presence, but resume their "normal" width (that of the containing block established by the P element) after the float. This document might be formatted as:

max( %B, %P )
%B %P
%P %B
`IMG^e
これは見本の~textであって、浮動~要素が，親の中で その ~margin, ~border, ~padding は遵守しつつ，左／右に移動されることを示す以外の目的はない。 これは見本の~textであって、浮動~要素が，親の中で その ~margin, ~border, ~padding は遵守しつつ，左／右に移動されることを示す以外の目的はない。
浮動~boxが，相互作用する様子を示す図。 図の %B, %P は、順に `BODY^e, `P^e の~marginを表す。 浮動しない要素の間では，連接する縦方向の~marginが相殺される一方で、 浮動体（ `IMG^e ）の~margin（図の黄色の枠）は、他と相殺されない。 ◎ Image illustrating how floating boxes interact with margins.

~HTMLが次であったとしても、整形は正確に同じになる： ◎ Formatting would have been exactly the same if the document had been: 

<BODY>
  <P>これは見本の~textであって、
  <IMG src=img.png alt="この画像は浮動体の説明用。">
           ...
</BODY>

何故なら、浮動体の左方に来る`現在の行l$上の内容は，浮動体の右~脇から下へ~flowするように配置し直されるので。 ◎ because the content to the left of the float is displaced by the float and reflowed down its right side.

`~marginの相殺法$に言明されているように、浮動~boxの~marginと他の~boxの~marginとが`相殺-$されることは、決してない。 したがって，この例においては、 `P^e ~boxと, 浮動された `IMG^e ~boxとの合間の縦方向~marginが`相殺-$されることはない。 ◎ As stated in section 8.3.1, the margins of floating boxes never collapse with margins of adjacent boxes. Thus, in the previous example, vertical margins do not collapse between the P box and the floated IMG box.

浮動体は、`通常flow$の下でも，他の~boxと重合することはある（例：浮動体の`側方$に重合するような 通常flowに属する~boxがあって，その横方向~marginが負の場合など）。 その際の塗り順序については、`積層文脈$を見よ。 ◎ The contents of floats are stacked as if floats generated new stacking contexts, except that any positioned elements and elements that actually create new stacking contexts take part in the float's parent stacking context. A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When this happens, floats are rendered in front of non-positioned in-flow blocks, but behind in-flow inlines.

`通常flow$の下で，浮動体が他の要素の~borderと重合する場合に何が起こるかを，次の図に示す： ◎ Here is another illustration, showing what happens when a float overlaps borders of elements in the normal flow.

最初の段落の見本~textがこの中に~flowされている。 ~sourceのこのあたりには
浮動する画像がある。 画像は縦に長いので、この段落より下へ突き出る。
ゆえに、 2 番目の段落も影響されることになる。 この中のどの行内~boxも，画像の~marginより内側に侵入することは禁止されているので、 “脇へ押し出される”。 段落の~boxは，依然として矩形であるが、その~borderと背景は，浮動している画像の背後に隠される。
浮動している画像は、それに重合する`塊~box$の~border（図の赤線）を遮る。 図の灰色の点線は外縁~辺（~margin辺）, 細い青線が`内縁~辺$（内容~辺）を表す。 ◎ Image showing a floating image that overlaps the borders of two paragraphs: the borders are interrupted by the image. ◎ A floating image obscures borders of block boxes it overlaps.

`clear$p ~propを利用して，内容を浮動体の`側方$に~flowさせなくする方法を、次の例で、図解する。 ◎ The following example illustrates the use of the 'clear' property to prevent content from flowing next to a float.

上の例に、次の規則が加えられたとするとき： ◎ Assuming a rule such as this: 

p { clear: left }

整形は、次の様になるであろう： ◎ formatting might look like this:

最初の段落の見本~textがこの中に~flowされている。 ~sourceのこのあたりには
浮動する画像がある。 画像は縦に長いので、この段落より下へ突き出る。
↑
~clearance
↓
この段落は、先行するどの左~浮動体の~margin辺よりも下に来るように， `clear^p ~propが `left^v に設定されている。 段落の上端~marginの上には`~clearance$が加えられる。
両~段落とも、 `clear$p は `left^v に設定されることにより、 2 番目の段落は，浮動体の下へ “押出される” 。 この~~効果は、段落の上端~marginの上に “~clearance” を加えることにより達成される（ `clear$p ~propを見よ）。 ◎ Both paragraphs have set 'clear: left', which causes the second paragraph to be "pushed down" to a position below the float — "clearance" is added above its top margin to accomplish this (see the 'clear' property).

9.5.1. 浮動体の位置決め： `float^p ~prop

◎名 `float@p ◎値 `left$v | `right$v | `none$v ◎初 `none^v ◎適 すべての要素 — ただし、`絶対位置され$た要素は除く（注釈文を見よ）。 ◎継 されない ◎百 受容しない ◎媒 `視覚的$ ◎算 指定値 — ただし、注釈文を見よ。 ◎表終

この~propは、~boxが浮動すべきか, するならば 左方, 右方 のいずれへ浮動するかを指定する。 どの要素にも設定し得るが、`絶対位置され$た~boxを生成する要素には適用されず，その算出値も改められることになる — 9.7 節を見よ。 各種~値の意味は： ◎ This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

`left@v
要素は、左浮動~box — 左方へ浮動される`塊~box$ — を生成する。 周りの内容は、~boxの右~脇に, かつ ~boxの上端から~flowする（ `clear$p ~propの対象0になる）。 ◎ The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).
`right@v
要素は、右浮動~box — 右方へ浮動される`塊~box$ — を生成する。 周りの内容は、~boxの左~脇に, かつ ~boxの上端から~flowする（ `clear$p ~propの対象0になる）。 ◎ Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.
`none@v
~boxは浮動されない。 ◎ The box is not floated.

~UAは、`根~要素$に対しては，その `float$p を `none$v に扱ってよい。 ◎ User agents may treat float as 'none' on the root element.

浮動体の挙動は、以下に与える規則で統制され~MUST — 尚，以下の規則においては：

  • 他の浮動体も含め，どの~boxも、規則が対象にする浮動体と同じ`塊~整形文脈$に関与するものに限るとする。
  • 浮動体の［ 上端／右端／下端／左端 ］は、`外縁~辺$を指すとする。

【 原文には明示的に述べられていないが、以下の規則は，`相対~位置決め$より先に適用される。 】

◎ Here are the precise rules that govern the behavior of floats:

  1. 所与の左浮動~box %L に対し ⇒ %L の左端は， %L の`包含塊$の左端より左に位置しない

    右浮動~boxについても相似的な規則が課されるとする。

    ◎ The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.

  2. 所与の左浮動~box %L1, %L2 に対し， %L1 は %L2 に`先行する$ならば、次のいずれかが満たされる：

    • %L1 の右端は， %L2 の左端より右に位置しない
    • %L1 の下端は， %L2 の上端より下に位置しない

    右浮動~boxについても相似的な規則が課されるとする。

    ◎ If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
  3. 所与の左浮動~box %L, 右浮動~box %R に対し， %L, %R の`側方$が重合するならば ⇒ %L の右端は， %R の左端より右に位置しない ◎ The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.
  4. 所与の浮動~box %F に対し ⇒ %F の上端は、 %F の`包含塊$の上端より上に位置しない ◎ A floating box's outer top may not be higher than the top of its containing block.＼
  5. `相殺-$される 2 つの~marginの合間にある浮動体は、［ その`~flow$の一部を成す，浮動体の他は内容が空の`匿名~塊$である親 ］を持っていたかのように位置される。 【浮動体の`現在の行l$は、この親に包含される縦幅 0 の行l~boxになる。】 そのような親の位置は、 ~margin相殺の規則 にて定義される。 
    <div style="margin-bottom:1em;">塊</div>
<span style="float:left;">左浮動~box</span>
<div style="margin-top:1em;">塊</div>
    塊
    左浮動~box
    塊
    ◎ When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
  6. 所与の浮動~box %F, および %F に`先行する$［ `塊~box$ ／ `浮動~box$ ］ %B に対し ⇒ %F の上端は %B の外縁~上端~辺より上に位置しない ◎ The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
  7. 所与の浮動~box %F, および［ %F に`先行する$ ある~boxを包含している`行l~box$ %B ］に対し ⇒ %F の上端は %B の上端 より上に位置しない ◎ The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

  8. 所与の左浮動~box %L に対し， %L の左端が，包含塊の左端に接していないならば† ⇒ %L の右端は，包含塊の右端より右に位置しない

    右浮動~boxについても相似的な規則が課されるとする。

    ◎ A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
  9. 【 `clear$p が設定された浮動体に対する 追加の拘束。 】
  10. 以上による制約の下で、浮動~boxは 可能な限り上方に配置する。 ◎ A floating box must be placed as high as possible.
  11. 前項も含め，以上による制約の下で、［ 左浮動／右浮動 ］~boxは 可能な限り［ 左方／右方 ］に配置する。 ◎ A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

【† 原文では次の様に記されている： 】

“所与の左浮動~box %L1, %L2 に対し， %L1 は %L2 に`先行する$, かつ %L2 は %L1 の右にあるならば： %L2 の右端~外縁~辺は，包含塊の右端~辺より右に位置しない（くだけて言えば、可能な限り左方に来ていない左~浮動体は、包含塊の右端を突き出てはならない）”

しかしながら、 %L1 の横幅が 0 の場合は，例外とされるべきであろう（ “くだけて言えば” 以下の部分が正しい挙動とされるべき）。 例えば： 

<div style="width: 10em; border:solid blue 1px;">
<!-- 左~浮動体１（横幅 0 ） -->
<span style="float:left; height:1em; outline:solid red 1px;"></span>
<span style="float:left; width: 20em;">
左~浮動体２（横幅は包含塊のそれを超える）
</span>
…
</div>
左~浮動体２（横幅は包含塊のそれを超える） …
利用中の~browserによる上の~HTMLの呈示。 原文の規則に従うなら、 2 番目の左~浮動体は最初の浮動体（図の赤線）の下端より下に来なければならない。

ただし，~CSS_2においては、次の様な浮動体 %F の位置は未定義である： ［ %F と同じ`塊~整形文脈$に属する, `~flow内$にある負の縦方向~margin ］があって，［ そのような~marginすべてが 0 に設定された ］とするとき、 %F の位置がより上になる。 ◎ But in CSS 2, if, within the block formatting context, there is an in-flow negative vertical margin such that the float's position is above the position it would be at were all such negative margins set to zero, the position of the float is undefined. ◎ ↑↑References to other elements in these rules refer only to other elements in the same block formatting context as the float.

次の~HTML断片により、 b は右端へ浮動される。 ◎ This HTML fragment results in the b floating to the right. 

<P>a<SPAN style="float: right">b</SPAN></P>

`P^e 要素の横幅が十分あれば、 a と b は次の様に横並びにされる： ◎ If the P element's width is enough, the a and the b will be side by side. It might look like this:

a
b
`P^e が生成する~box（赤い点線）の中で、左に位置する a と, 浮動して右へ寄せられる b ◎ An a at the left side of a box and a b at the right side

9.5.2. 浮動体の~~脇への~flowの制御法： `clear^p ~prop

◎名 `clear@p ◎値 `none$v | `left$v | `right$v | `both$v ◎初 `none^v ◎適 `塊levelの要素$ ◎継 されない ◎百 受容しない ◎媒 `視覚的$ ◎算 指定値 ◎表終

この~propは、要素の `~clear対象@ とされる浮動~boxたちを指示する：

  • 浮動しない`塊levelの要素$に対しては、次が要求される：［ 要素が生成する~box（たち）の上端`~border辺$ ］は，［ 要素の`~clear対象$である どの浮動体の下端 `外縁~辺$ ］よりも上に位置しない。
  • `浮動~要素$に対しては、 後述の拘束 を見よ。
  • 他の要素には適用されない（ただし、 後述の注記 を見よ）。

【 “`~clear対象$” は、この訳で新たに導入した用語である。 その理由は、原文の “clear する” という動詞としての用法を和訳するためには，その目的語 — すなわち，~clear対象 — に変換する必要があること，および このように定義した方が本文を簡潔に記述できるからである。 】

◎ This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

要素の`~clear対象$は、`clear$p の値に応じて，次で与えられる： ◎ Values have the following meanings when applied to non-floating block-level boxes:

`left@v
要素に`先行する$すべての左浮動~box。 ◎ Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
`right@v
要素に`先行する$すべての右浮動~box。 ◎ Requires that the top border edge of the box be below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
`both@v
要素に`先行する$すべての浮動~box。 ◎ Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.
`none@v
空集合（すなわち、~boxの位置には，以下に述べる拘束は適用されないことを意味する）。 ◎ No constraint on the box's position with respect to floats.

【 この節の以下の記述は、下の例の終わりまで，浮動体でない要素を対象にする。 】

`none$v 以外の値に対しては、 `~clearance@ が導入され得る。 ~clearanceは、~margin相殺を~~抑えつつ，要素の `margin-top$p の上方にアキを加えるものとして動作する。 それは、浮動体の`側方$に重合しない所まで，要素を下方へ押出すために利用される。 ◎ Values other than 'none' potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.

要素の `仮の位置^V とは、要素が，［ その `clear$p ~propが `none^v である下で配置されたとき ］の，上端~border辺として与えられる。 要素は、その `仮の位置^V が，要素の`~clear対象$に含まれている いずれかの浮動体の`側方$にあるとき、 `~clearanceを持つ@ とされ、`~clearance$が導入されることになる（必然的に、要素の `clear$p の算出値は，非 `none^v である必要がある）。 ◎ Computing the clearance of an element on which 'clear' is set is done by first determining the hypothetical position of the element's top border edge. This position is where the actual top border edge would have been if the element's 'clear' property had been 'none'.

要素が`~clearanceを持つ$場合、要素とその周りの要素による~margin相殺の挙動も，`~marginの相殺法$に則って変化し、`~clearance$の量は，次のいずれかの挙動により設定される： ◎ If this hypothetical position of the element's top border edge is not past the relevant floats, then clearance is introduced, and margins collapse according to the rules in 8.3.1.

  • 挙動 A： `~clearance$を，次に挙げる 2 つの量の最大に設定する： ◎ Then the amount of clearance is set to the greater of:

    1. 要素が生成する塊の上端~border辺を［ `~clear対象$の浮動体の下端~外縁~辺のうち，最も下方にある位置 ］に配置するために必要とされる量。

      【 `~clearance$がこの量で与えられる場合、塊の上端~marginは，塊の上端~位置に影響しなくなることになる。 】

      ◎ The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.

    2. 塊の上端~border辺を `仮の位置^V に配置するために必要とされる量。

      【 `仮の位置^V は浮動体の`側方$にある筈なので，何のために この量も得る必要があるのか不思議に見えるが、このことは，`~clearance$が導入される — すなわち，要素の上端~marginが他と相殺されなくなる — と同時に，その副作用として浮動体の上端~位置も変わり得ることを意味する（下の例を見よ）。 】

      ◎ The amount necessary to place the top border edge of the block at its hypothetical position.
  • 挙動 B： `~clearance$を，単に挙動 A の最初の項で与えられる量に設定する。 ◎ Alternatively, clearance is set exactly to the amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.

注記： いずれの挙動も、既存の Web 内容との互換性に関する評価を待っているため，許容されている。 将来の~CSS仕様は、このいずれか, または他の挙動を要求することになる。 ◎ Note: Both behaviors are allowed pending evaluation of their compatibility with existing Web content. A future CSS specification will require either one or the other.

注記： `~clearance$は 0 以下にもなり得る。 ◎ Note: The clearance can be negative or zero.

【~clearanceの計算例。以下、この例の和訳は省略する。】
【~clearanceが負になり得る例。以下、この例の和訳は省略し，次の例に差し替える。】

次の~HTMLが与えられた下では： 

<div style="line-height:1.2em;">
  <div style="margin-bottom:4em; border:solid pink 5px;"
  >塊１</div>
  <div>
    <div style="float:left; background:yellow;"
    >（浮動体）</div>
    <div style="margin-top:1em; border:solid pink 5px;"
    >塊２</div>
  </div>
</div>

塊１と塊２の~marginは相殺され，塊１の下端~border辺と塊２の上端~border辺との間隔は、［ 塊１の下端~marginと塊２の上端~marginの最大 ］ = `4em^v になる。 浮動体の`現在の行l$の上端は、塊２の親 `div^e の上端`内縁~辺$（図の点線）に位置する（塊２の~border辺に一致する）：

塊１
（浮動体）
塊２
利用中の~browserによる上の~HTMLの呈示。 赤みがかった太めの線は、塊１／２の~border。

塊２の~styleに `clear$p: `left^v を追加したとする。 その呈示は、次の様になる：

塊１
（浮動体）
塊２
塊２に `clear$p: `left^v を追加したときの，利用中の~browserによる呈示

~marginは相殺されなくなり、塊２は浮動体の下に来る。 塊１の~marginが浮動体との間を隔てる結果，浮動体の位置はそのままになるので、`~clearance$は，挙動 A, B いずれにせよ ( ( 浮動体の縦幅 ) − ( 塊２の上端~margin ) ) になる。

上の~HTMLにて、今度は、塊１の下端~marginと塊２の上端~marginを入れ替えたとする： 

<div style="line-height:1.2em;">
  <div style="margin-bottom:1em; border:solid pink 5px;"
  >塊１</div>
  <div>
    <div style="float:left; background:yellow;"
    >（浮動体）</div>
    <div style="margin-top:4em; border:solid pink 5px;"
    >塊２</div>
  </div>
</div>

その呈示は，入れ替える前と同じになるが、塊２の~styleに `clear$p: `left^v を追加したときの呈示は、次の様になる：

塊１
（浮動体）
塊２
`clear$p の効果により，浮動体の位置が変化する図。

~marginが相殺されなくなるに伴い、浮動体の`現在の行l$の位置（図の点線）は，塊２の上端~borderから塊１の下端~margin辺へ移動する。 浮動体の縦幅が図のように小さければ： 挙動 A の下では、塊２の位置は そのまま維持されることになる。 挙動 B の下では、塊２の上端が浮動体の下端に接合され，元の位置より上に移動することになる。

`clear^p ~propが浮動~要素~上に設定されたときは、 浮動体の位置決め規則 に次の拘束も追加される： ◎ When the property is set on floating elements, it results in a modification of the rules for positioning the float. An extra constraint (#10) is added:

  • 所与の浮動体 %F に対し ⇒ %F の上端 `外縁~辺$は、 %F の`~clear対象$である，どの浮動体の下端 `外縁~辺$よりも上に位置しない ◎ The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes (in the case of 'clear: right'), or both ('clear: both').

注記： `clear$p ~propは、~CSS_1においては 【行内levelも含め】 すべての要素に適用される — したがって、すべての要素~上でこの~propを~supportする実装もある。 ［ ~CSS_1998 ／~CSS_2 ］においては、`塊levelの要素$のみに適用される。 したがって、作者は，この~propを`塊levelの要素$に限って利用するべきである。 `clear$p を`行内levelの要素$ 上でも~supportする実装は、上に説明した`~clearance$を設定するのでなく，分断を強制するべきである — 実質的には、空の`行l~box$を一つ以上~挿入する（または、 9.5 節に述べたように，新たな`行l~box$を下方へズラす）ことにより、［ `~clearanceを持つ$ような行内levelの要素を含んでいる`行l~box$ ］の上端を`~clear対象$の どの浮動~boxよりも下へ移動させる ］ことになる。 ◎ Note. This property applied to all elements in CSS1. Implementations may therefore have supported this property on all elements. In CSS2 (1998) and CSS 2 the 'clear' property only applies to block-level elements. Therefore authors should only use this property on block-level elements. If an implementation does support clear on inline elements, rather than setting a clearance as explained above, the implementation should force a break and effectively insert one or more empty line boxes (or shifting the new line box downward as described in section 9.5) to move the top of the cleared inline's line box to below the respective floating box(es).

9.6. 絶対~位置決め

絶対~位置決め~modelの下では、~boxは，明示的に その包含塊を基準に~offsetされる。 ~boxは、`通常flow$からまるごと除去される（後続の内容は~boxが元から無かったかのように~layoutされる）。 `絶対位置され$た~boxは、［ `通常flow$に属する子 ／ `絶対位置され$た子孫のうち`固定位置され$ていないもの ］に対し，新たな包含塊を確立する。 `絶対位置され$た要素の内容は、他の~boxを回り込むように~flowされることはない（他の~boxに重なり得る） — したがって，それらの~boxの`積層level$に依存して，一方が他方の内容を遮ることになる。 ◎ In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

この仕様における `絶対位置され@ た要素（または その~box）とは、その要素の `position!p ~prop値が［ `absolute$v ／ `fixed$v ］にされていることを~~意味する。 ◎ References in this specification to an absolutely positioned element (or its box) imply that the element's 'position' property has the value 'absolute' or 'fixed'.

【この例は，この訳による追加。】

`position^p: `absolute^v による絶対~位置決めの例を示す。 そのような~boxの配置は，他に影響することはなく、重合したり，親~boxの外にはみ出すのも自由になる。 その重なり順は、他が指定されない限り，~sourceに現れる順に従う（`積層文脈$も見よ）：

↑
↗
→
↘
↓
↙
←
↖
利用中の~browserによる，下の~CSSと~HTMLの呈示。 大きさ一定の各~box（青い~borderに灰色の背景）は、中央の~size 0 の~box（赤い点 — 実際には見えない）を原点に，絶対~位置決めを利用して，時計回りに配置されている。

上の図に利用されている HTML： 

<div style="width:10em; height:10em; border:solid black 1px;">
  <div id="origin">
    <div style="bottom: 1.5em; left: -1.5em;">↑</div>
    <div style="bottom:   1em; left:    1em;">↗</div>
    <div style="bottom:-1.5em; left:  1.5em;">→</div>
    <div style="top:      1em; left:    1em;">↘</div>
    <div style="top:    1.5em; right:-1.5em;">↓</div>
    <div style="top:      1em; right:   1em;">↙</div>
    <div style="top:   -1.5em; right: 1.5em;">←</div>
    <div style="bottom:   1em; right:   1em;">↖</div>
  </div>
</div>

~CSSは、次のようになっている。 `#origin^css 要素は外縁~sizeが縦横ともに 0 にされ、絶対位置された各 子~box（ `#origin > div^css ）用に包含塊を確立する。 そうなるようにするため、その `position$p を `relative$v にすると同時に、`相対~位置決め$を利用して，全体を囲う~boxの中心に位置させている。 

#origin {
  position: relative;
  top:50%; left:50%;
  width:0; height:0;
}
#origin > div {
  position: absolute;
  width: 2.6em;
  height: 2.6em;
  border: solid blue 0.2em;
  background: silver;
  text-align: center;
  line-height: 2.6em;
}

9.6.1. 固定~位置決め

固定~位置決め（ `position!p: `fixed$v ）は、`絶対~位置決め$の一種である（したがって`有位置$な~boxである）。 唯一の相違は、固定位置された~box用の包含塊は，`表示域$により確立される点にある。 `連続的~媒体$に対しては、固定~boxは，文書が~scrollされても移動しない。 この点に関しては、 固定的な背景~画像 【 `background-attachment$p 】 と同様になる。 頁d媒体 に対しては、固定位置された~boxは、毎~頁ごとに繰返される。 これは例えば，各~頁の定位置に日付などの何かを配置するときに有用になる。 `初期~包含塊$にて可視でない，固定位置された~boxの頁~区画からはみ出る部分は、切取られ，その部分は印刷されない。 ◎ Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images. For paged media, boxes with fixed positions are repeated on every page. This is useful for placing, for instance, a signature at the bottom of each page. Boxes with fixed position that are larger than the page area are clipped. Parts of the fixed position box that are not visible in the initial containing block will not print.

【 原文の例は固定位置されていない絶対~位置決め（ `position$p: `absolute$v ）でも機能的に同じになり，有意義な例とは言えないので、この訳では，例を差し替える。 】

下の~boxをクリックすると固定位置された~boxになる。

固定位置された状態での，この~boxの~styleは、次の様にされている（元の~styleは `position^p が `static$v である以外，同じ）： 

`position$p: `fixed$v; /*固定~位置*/
left: 20%;
top: 30%;
width: 10em;
height: 4em;
background: pink;

9.7. `display^p, `position^p, `float^p の関係性

~boxの生成と~layoutに影響する 3 種の~prop — `display$p, `position$p, `float$p — は、次の様に相互作用する： ◎ The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:

  1. `display!p の指定値は `none$v ならば ⇒ 要素は~boxを生成しないので， `position$p ／ `float$p は適用されない。 ◎ If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
  2. 他の場合， `position!p の指定値は［ `absolute$v ／ `fixed$v ］ならば ⇒ ~boxは`絶対位置され$る（~boxの位置は，各種`~offset~prop$と~boxの包含塊から決定される）。 `float!p の算出値は `none$v になり， `display$p の算出値は 下の表に従う。 ◎ Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
  3. 他の場合， `float$p の指定値は `none$v 以外ならば ⇒ ~boxは浮動され， `display$p の算出値は 下の表に従う。 ◎ Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.
  4. 他の場合，要素は`根~要素$であるならば ⇒ `display$p の算出値は 下の表に従う。 ただし、 `display!p の指定値が `list-item$v の場合に その算出値が［ `block$v ／ `list-item$v ］のいずれになるかは、~CSS_2においては未定義である。 ◎ Otherwise, if the element is the root element, 'display' is set according to the table below, except that it is undefined in CSS 2 whether a specified value of 'list-item' becomes a computed value of 'block' or 'list-item'.
  5. 他の場合 ⇒ `display!p ~propの指定値が，そのまま算出値になる。 ◎ Otherwise, the remaining 'display' property values apply as specified.
指定値◎ Specified value 算出値◎ Computed value
`inline-table$v `table$v
`table-*$t, `inline$v, `inline-block$v `block$v
その他 指定値

【 参考： ~box型の自動的な変換 】

9.8. 通常flow, 浮動体, 絶対~位置決めの比較

【 この節の和訳は，省略する。 】

9.9. 多層化された呈示

9.9.1. 積層levelの指定法： `z-index^p ~prop

◎名 `z-index@p ◎値 `auto$v | `integer$t ◎初 `auto^v ◎適 `有位置$な要素 ◎継 されない ◎百 受容しない ◎媒 `視覚的$ ◎算 指定値 ◎表終

`z-index$p ~propは、要素が生成する`有位置$な~boxに対し，次を指定する： ◎ For a positioned box, the 'z-index' property specifies:

  1. ~boxが属している`積層文脈$における，~boxの`積層level$。 ◎ The stack level of the box in the current stacking context.
  2. ~boxは`積層文脈$を確立するかどうか。 ◎ Whether the box establishes a stacking context.

各種~値の意味は： ◎ Values have the following meanings:

`integer$t
生成される~boxは、新たな`積層文脈$を確立する。 ~boxの`積層level$は，所与の整数になる。 ◎ This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.
`auto@v
生成される~boxの`積層level$は， 0 になる。 ~boxは、根~要素でない限り，新たな`積層文脈$を確立しない。 【この~propによる効果としては。積層文脈は、他の要因により確立される場合もある。】 ◎ The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

この節の表記 “手前” は、利用者が面する~screenから，利用者に近づく方を意味する ◎ In this section, the expression "in front of" means closer to the user as the user faces the screen.

~CSS_2においては、各~boxは，横方向, 縦方向の位置に加え， “z-軸” 方向（~screen面から垂直に利用者に近づく方向）の位置 — 略して z-位置 — も持つ。 z-位置は、特に~boxたちが視覚的に重合する場合に関わり、整形する際の他の~boxによる層との重なり順を表す。 この節では、各~boxが z-軸~沿いのどこに位置されるかについて論じる。 ◎ In CSS 2, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. This section discusses how boxes may be positioned along the z-axis.

描画~木が~canvasに塗られる順序は、`積層文脈$を通して述べられる。 `積層文脈$は、別の`積層文脈$を包含し得る†。 `積層文脈$は、その親の`積層文脈$の視点からは不可分的である — それらの~boxたちの合間に，他の`積層文脈$に属する~boxが来ることはない††。 ◎ The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

【† すなわち、各 積層文脈は，`~box木$の中の ある部分木を表現する。 】【†† すなわち、親の視点からは，不可分的な一枚の層（＝末端の子孫）として扱われる。 】

どの~boxも，ある一つの `積層文脈@ に所属する。 所与の`積層文脈$に属する，どの`有位置$な~boxも、整数の `積層level@ を持つ（負もとり得る）。 それは、同じ`積層文脈$に属する他の~boxの`積層level$に相対的な， z-位置である — 同じ積層文脈の中では：

  • ~boxたちは、`積層level$がより高いものほど，手前の層に整形される。
  • `積層level$が同じ~boxたちは、木~順序に則って，奥から手前にかけて積層される。
◎ Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

`根~要素$は、`積層文脈$が成す階層の根になる。 他の`積層文脈$は、 `z-index$p の算出値が `auto$v 以外にされた，`有位置$な要素（`相対位置され$た要素も含む）により生成される。 `積層文脈$は、包含塊に関係するとは限らない。 将来~levelの~CSSでは、他の~propからも`積層文脈$が導入され得る — 例えば、 `opacity$p 。 ◎ The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example 'opacity' [CSS3COLOR].

それぞれの`積層文脈$の中では、次に挙げる各~層が，挙げられる順に，奥から手前の順序で塗られる： ◎ Within each stacking context, the following layers are painted in back-to-front order:

  1. `積層文脈$を確立している要素の，背景と~border。 ◎ the background and borders of the element forming the stacking context.
  2. 子 `積層文脈$のうち，`積層level$が負のもの（最も負のものが最初）。 ◎ the child stacking contexts with negative stack levels (most negative first).

  3. 子孫たちのうち，`有位置$でないもの — 次の順に塗られる： ◎ ↓

    1. `~flow内$にある, かつ `行内level$でないもの。 ◎ the in-flow, non-inline-level, non-positioned descendants.
    2. `浮動体$。 （ A ） ◎ the non-positioned floats.
    3. `~flow内$にある, かつ `行内level$のもの。 （ B ） ◎ the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  4. ［ 子 `積層文脈$ ／ `有位置$な子孫 ］のうち，`積層level$が 0 のもの。 （ C ） ◎ the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  5. 子 `積層文脈$のうち，`積層level$が正のもの（最も正のものが最後）。 ◎ the child stacking contexts with positive stack levels (least positive first).

ただし、次に挙げる【子 積層文脈でない】要素は，要素~自身が新たな`積層文脈$を生成したかのように塗られる — その［ `有位置$な子孫, および 子 `積層文脈$ ］は、要素が属する`積層文脈$の一部を成すことを除いて：

  • `有位置$でない浮動体（ 層 A ）
  • `行内-~table$／`行内-塊$（層 B ） 【より一般的には、`不可分な行内$。】
  • `有位置$な, かつ `積層level$は 0 の要素（層 C ）

【 すなわち，これらの要素は、各~要素ごとに，その内容から［ 有位置な子孫／積層文脈を成す部分木 ］は除外した部分が，上の手続きに従って不可分的な一枚の層に塗られる（具体的には、段 1 と段 3 のみ関わる）。 この結果の各~層と, 除外されたものたちが、要素が属する積層文脈の下で，上の手続きに従って塗られることになる。 】

◎ Within each stacking context, positioned elements with stack level 0 (in layer 6), non-positioned floats (layer 4), inline blocks (layer 5), and inline tables (layer 5), are painted as if those elements themselves generated new stacking contexts, except that their positioned descendants and any would-be child stacking contexts take part in the current stacking context.

この塗り順序は、各`積層文脈$に対し，再帰的に適用される。 この，`積層文脈$の塗り順序の記述は、 付録 E による詳細な規範的~定義の概観である。 ◎ This painting order is applied recursively to each stacking context. This description of stacking context painting order constitutes an overview of the detailed normative definition in Appendix E.

【この例は，この訳による追加。】

塗り順序が適用されるのは、文書~木から~box木に組み替えられた後になる。 次の様な~HTMLがあるとき： 

<div style="z-index:-1">
  <div style="position:fixed; z-index:1; ..."
  >固定位置された内容</div>
</div>

`固定位置され$たの要素は，~box木においては根（`初期~包含塊$）の直下に移動されるので、この~HTMLの “固定位置された内容” は，親 `div^e の`積層level$に関係なく，［ 根~要素が確立する積層文脈の中で 積層level 0 のもの ］より，手前に塗られることになる。

次の例では、（ "id" 属性で命名された）各~boxの`積層level$は，［ "text2" = 0, "image" = 1, "text3" = 2, "text1" = 3 ］になる。 "text2" の`積層level$は、根~boxから継承される 【積層levelの継承-とは？】 。 他のものは `z-index$p ~propで指定されている。 ◎ In the following example, the stack levels of the boxes (named with their "id" attributes) are: "text2"=0, "image"=1, "text3"=2, and "text1"=3. The "text2" stack level is inherited from the root box. The others are specified with the 'z-index' property. 

<HTML lang="ja">
  <HEAD>
    <META charset="utf-8">
    <TITLE>z-位置の用例</TITLE>
    <STYLE type="text/css">
      .pile { 
        position: absolute; 
        left: 2in; 
        top: 2in; 
        width: 3in; 
        height: 3in; 
      }
    </STYLE>
  </HEAD>
  <BODY>
    <IMG id="image" class="pile" 
         src="butterfly.png" alt="見本~画像"
         style="z-index: 1"
    >

    <DIV id="text1" class="pile" 
         style="z-index: 3"
    >
      
この~textは、見本~画像より手前の層に来る
◎
This text will overlay the butterfly image.

    </DIV>

    <DIV id="text2">
      
この~textは、一番~奥の層に来る
◎
This text will be beneath everything.

    </DIV>

    <DIV id="text3" class="pile" 
         style="z-index: 2"
    >
      この~textは、 text1 より奥, かつ
      見本~画像より手前の層に来る
◎
This text will underlay text1, but overlay the butterfly image

    </DIV>
  </BODY>
</HTML>

この例は、透明さの~~概念を~~説明する。 背景に対する既定の挙動では、背後にある~boxは可視にされる。 この例では、各~boxは，下~層の~boxの上~層に透明に~~重ねられる。 この挙動は、既存の各種 背景~prop のいずれかを利用して上書きできる。 ◎ This example demonstrates the notion of transparency. The default behavior of the background is to allow boxes behind it to be visible. In the example, each box transparently overlays the boxes below it. This behavior can be overridden by using one of the existing background properties.

9.10 ~text方向： `direction^p, `unicode-bidi^p ~prop

`双方向的~text@ を~supportしない`適合~UA$は、この節にて述べる `direction$p ／ `unicode-bidi$p ~propを無視してよい。 この例外には、単に ~system上の~fontが~supportするがため，右横書き文字を描画し得るが、右横書き~text方向の概念は~supportしないような~UAも含まれる。 ◎ Conforming user agents that do not support bidirectional text may ignore the 'direction' and 'unicode-bidi' properties described in this section. This exception includes UAs that render right-to-left characters simply because a font on the system contains them but do not support the concept of right-to-left text direction.

【 以下、この節の内容の和訳は、 CSS Writing Mode 仕様の ~textの方向性, および `direction^p, `unicode-bidi^p ~prop 各~節に委譲。 参照のため, および CSS Writing Mode による拡張との差分を示すため、この節にて定義される用語のみ，以下に挙げる： 】

  • `双方向性@
◎名 `direction@p ◎値 `ltr@v | `rtl@v ◎表終 ◎名 `unicode-bidi@p ◎値 `normal@v | `embed@v | `bidi-override@v ◎表終