この図にはボックスが三つ存在し，そのうちの一つが匿名となっている。
9.及び10.では，視覚フォーマットモデルを示す。具体的には，利用者エージェントが視覚メディアの文書ツリーをどのように処理するかを示す。
視覚フォーマットモデルでは，文書ツリーの各要素は，ボックスモデルに従ってゼロ個以上のボックスを生成する。これらのボックスのレイアウトは，次によって支配される。
9.及び10.で定義される特性は，連続メディアにもページ付けしたメディアにも適用される。しかし，ページ付けしたメディアに適用する場合は，マージン特性の意味は様々になる。詳細については，ページモデルを参照すること。
視覚フォーマットモデルは，フォーマット化のすべての局面を規定するわけではない。例えば，字間スペース空けアルゴリズムは指定しない。適合する利用者エージェントの振る舞いは，この標準情報(TR)で定義されないフォーマット化の問題に関しては異っていてもよい。
連続メディアの利用者エージェントは，一般に，利用者に表示域を提供する。ここで表示域とは，画面上のウィンドウ又は他の表示領域のこととする。表示域を通じて利用者は文書を参照する。表示域のサイズを変更できる場合は，利用者エージェントは文書のレイアウトを変更してもよい(初期包含ブロック参照すること)。表示域が文書の初期包含ブロックよりも小さい場合，利用者エージェントは，スクロール機能を提供することが望ましい。描画面ごとに多くても一つの表示域が存在するが，利用者エージェントは，一つ以上の描画面にレンダリングしてもよい。すなわち，利用者エージェントは，同じ文書の異なる表示をしてもよい。
CSS2では, 多くの場合，ボックスの位置及びサイズは，包含ブロックと呼ばれる長方形のボックスの辺に関連して計算される。一般に，生成されたボックスは，子孫ボックスのための包含ブロックとして動作する。すなわち，ボックスは，その子孫のために包含ブロックを"設立する"。"ボックスの包含ブロック"という表現は，"内部にそのボックスが生存する包含ブロック"という意味であって，そのボックスが生成する包含ブロックという意味ではない。
各ボックスは，その包含ブロックと関連して位置を与えられるが，この包含ブロックによって閉じ込められるわけではない。すなわち，ボックスは，オーバフローしてもよい。
文書ツリーのルートは，一連のレイアウトのための初期包含ブロックとして使用されるボックスを生成する。
初期包含ブロックの幅は，ルート要素の'width'特性を用いて指定してもよい。この特性が値'auto'をもつ場合は，利用者エージェントは，初期幅を提供する。これには例えば，利用者エージェントは，表示域の現在の幅を使用する。
初期包含ブロックの高さには，ルート要素の'height'特性を指定してもよい。 この特性が値'auto'をもつ場合は，包含ブロックの高さは，文書の内容に合わせて増大する。
初期包含ブロックは，位置指定も浮動もできない。すなわち，利用者エージェントは，ルート要素の'position'特性及び'float'特性を無視する。
以降では，CSS2で生成されてもよいボックスの型を示す。ボックスの型が，視覚フォーマットモデルの振る舞いに影響を与える場合もある。以降で示す'display'特性が，ボックスの型を指定する。
ブロックレベル要素とは，段落など，ブロックとして視覚的にフォーマットされるソース文書のブロックレベル要素とする。'display'特性の値には，'block'，'list-item'，'compact'及び'run-in'(コンパクトボックス及びランインボックスを参照)，'table'など，要素をブロックレベルにするものがある。
ブロックレベル要素は，ブロックボックスだけを含む基本ブロックボックスを生成する。基本ブロックボックスは，子孫ボックス及び生成される内容に対して包含ブロックを確立し，いかなる位置決め方式でも含まれるボックスとする。基本ブロックボックスは，ブロックフォーマット化文脈に関係する。
'list-item'要素，マーカを有する要素などの，基本ボックスの外部に付加的ボックスを生成するブロックレベル要素もある。これらの付加的なボックスは，基本ボックスに関連して配置される。
次の文書を検討する。
<DIV> Some text <P>More text </DIV>この例では，DIVもPも'display: block'をもつと仮定する。DIVには，行内内容もブロック内容もあるように見える。フォーマット化の定義をより簡単にするために，"Some text"の周囲に 匿名ブロックボックス が存在すると仮定する。
この図にはボックスが三つ存在し，そのうちの一つが匿名となっている。
言い換えれば，上のDIVに対して生成されるようなブロックボックスが，その内部に他のブロックボックス(この例ではP)をもつ場合，内部に存在できるのは，任意の行内ボックスを一つの匿名ブラックボックスの中に包み込むことによって，ブロックボックスだけとする。
このモデルを例で示す。まず，次の規則を仮定する。
/* Note: HTML UAs may not respect these rules */
BODY { display: inline }
P { display: block }
これが次のHTML文書で使用されるとする。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HEAD> <TITLE>Anonymous text interrupted by a block</TITLE> </HEAD> <BODY> This is anonymous text before the P. <P>This is the content of P.</> This is anonymous text after the P. </BODY>
BODY要素は，匿名テキストのチャンク(C1)を含み，これにブロックレベル要素が続き，さらに，その後に匿名テキストの他のチャンク(C2)が続く。その結果生じるボックスは，BODYの匿名ブロックボックスとなり，C1の周囲の匿名ブロックボックス，Pブロックボックス及びC2の周囲の他の匿名ブロックボックスを含む。
匿名ボックスの特性は，それを囲い込む非匿名ボックス(例ではDIVに対するもの)から継承される。非継承特性は，初期値をもつ。例えば，匿名ボックスのフォントはDIVから継承されるが，マージンはゼロとなる。
行内レベル要素とは，内容の新しいブロックを形成しないソース文書の要素のこととする。そこで，内容は行の中に分散される。例えば，段落内のテキストの強調された断片，行内画像などとなる。'inline'，'inline-table'，'compact'及び'run-in'(コンパクトボックス及びランインボックス参照)など，要素を行内にする'display'特性の値もある。行内レベル要素は，行内ボックスを生成する。
行内ボックスは，複数のフォーマット化文脈に関連してもよい。
例として，次の文書を示す。
<P>Some <EM>emphasized</em> text</P>
この例では，Pが内部に複数の行内ボックスをもつブロックボックスを生成する。"emphasized"のボックスは，行内要素(EM)が生成する行内ボックスだが，その他のボックス("Some"及び"text")は，ブロックレベル要素(P)が生成する行内ボックスである。後者は，関連する行内レベル要素をもたないので，匿名行内ボックスと呼ぶ。
これら匿名行内ボックスは，その親ブロックボックスから継承可能な特性を継承する。非継承特性は初期値をもつ。例では，匿名初期ボックスの色は，Pから継承されるが，背景は透明となる。
匿名ボックスの型が文脈から明らかな場合は，匿名行内ボックス及び匿名ブロックボックスの両方を，この標準情報(TR)では，単に匿名ボックスと呼ぶ。
表をフォーマット化する場合には，より多くの型の匿名ボックスが現れる。
コンパクトボックスは，次のとおりに振る舞う。
コンパクトボックスがマージンの中に位置を与えられる方法を，次に示す。 コンパクトボックスは，ブロックの最初の行ボックスの外(左又は右)に置かれるが，行ボックスの高さの計算に影響する。コンパクトボックスの'vertical-align'特性は，行ボックスに相対的なコンパクトボックスの上下位置を決定する。コンパクトボックスの左右位置は，常にブロックボックスのマージンの中とする。
1行にフォーマットできない要素は，次のブロックのマージンに配置できない。例えば，BR要素を含むHTMLの'compact'要素は，常にブロックボックスとしてフォーマットされる。この場合，BRのデフォルトスタイルとして，新しい行の挿入を仮定している。マージンの中に複数行のテキストを置くためには，'float'特性がより適切であることが多い。
次の例は，コンパクトボックスを示している。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A compact box example</TITLE>
<STYLE type="text/css">
DT { display: compact }
DD { margin-left: 4em }
</STYLE>
</HEAD>
<BODY>
<DL>
<DT>Short
<DD><P>Description goes here.
<DT>too long for the margin
<DD><P>Description goes here.
</DL>
</BODY>
</HTML>
この例をフォーマットすると，次となる。
short Description goes here
too long for the margin
Description goes here
'text-align'特性を使用して，マージン内部に，すなわち，マージンの左辺('left')，マージンの右辺('right')，又はマージンの中央('center')に対して，コンパクト要素を配置することができる。'justify'という値は適用されず，'left'又は'right'のいずれかとして処理される。'left'又は'right'は，そのマージンでコンパクト要素がフォーマットされるブロックレベル要素の'direction' に依存する。方向('direction')が'ltr'の場合は'left'，'rtl'の場合は'right'となる。
コンパクトボックスが生成される要素とどのように相互作用するかに対する情報は，生成される内容を参照すること。
ランインボックスは，次のとおりに振る舞う。
'ランイン'ボックスは，ランインヘッダのために有用となる。その例を次に示す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A run-in box example</TITLE>
<STYLE type="text/css">
H3 { display: run-in }
</STYLE>
</HEAD>
<BODY>
<H3>A run-in heading.</H3>
<P>And a paragraph of text that
follows it.
</BODY>
</HTML>
この例をフォーマットしたものを次に示す。
A run-in heading. And a paragraph of text that follows it.
ランイン要素の特性は，ソースツリーの親から継承され，視覚的にその一部となるブロックボックスからは継承されない。
ランインボックスが，生成される内容とどのように相互作用するかに対する情報は，生成される内容を参照すること。
| 値: | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
| 初期値: | 行内 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | すべてのメディア |
この特性の値は，次の意味をもつ。
'none'の表示は不可視のボックスを生成しない点に注意すること。すなわち，'none'は，全くボックスを生成しない。CSSは，フォーマット化に影響するがそれ自体は可視ではないフォーマット化構造で，要素がボックスを生成できる機構がある。詳細については，可視性を参照すること。
'display'の初期値は'inline'とするが，利用者エージェントのデフォルトスタイルシートの規則は，この値を上書きしてもよい。附属書のHTML4.0のスタイルシートの例を参照すること。
'display'特性の例を幾つか次に示す。
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none } /* Don't display images */
適合するHTML利用者エージェントは，'display'特性を無視してもよい。
CSS2では, ボックスは三つの位置決め方式に従ってレイアウトしてよい。
'position'特性及び'float'特性は，ボックスの位置を計算するためにどのCSS2位置決めアルゴリズムを使用するかを決定する。
| 値: | static | relative | absolute | fixed | inherit |
| 初期値: | static |
| 適用対象: | すべての要素。ただし，生成される内容は除く。 |
| 継承: | しない |
| パーセント値: | N/A |
| メディア: | 視覚メディア |
この特性の値は，次の意味をもつ。
@media screen {
H1#first { position: fixed }
}
@media print {
H1#first { position: static }
}
要素は，要素の'position'特性が'static'以外の値をもつ場合，視覚メディア
この特性は，ボックスの内容の上辺がボックスの包含ブロックの上辺からどの程度下にずれているかを指定する。
この特性は，ボックスの内容の右辺がボックスの包含ブロックの右辺からどの程度左にずれているかを指定する。
この特性は，ボックスの内容の下辺がボックスの包含ブロックの下辺からどの程度上にずれているかを指定する。
この特性は，ボックスの内容の左辺がボックスの包含ブロックの左辺からどの程度右にずれているかを指定する。
四つの特性に対する値には，次の意味がある。 絶対位置決めしたボックスに対しては，オフセットはボックスの包含ブロックに関係する。相対位置決めのボックスに対しては，オフセットは，ボックス自体の外辺に関係する。すなわち，ボックスは通常のフローの中に位置が与えられ，その後，これらの特性に従ってその位置からずらされる。
通常のフローにおけるボックスは，フォーマット化文脈に属す。これらは，ブロックボックス又は行内ボックスだが，同時に両方ではない。ブロックボックスはブロックフォーマット化文脈に関係する。行内ボックスは行内フォーマット化文脈に関係する。
ブロックフォーマット化文脈では, ボックスは，包含ブロックの最上部から始まって上下方向にかわるがわるレイアウトされる。二つの兄弟ボックス間の上下の距離は，'margin'特性によって決定される。ブロックフォーマット化文脈における隣接するブロックボックス間の上下マージンは，つぶされる。
ブロックフォーマット化文脈では, 各ボックスの左外辺は包含ブロックの左辺に触れる。左向きのフォーマット化の場合は，右辺が触れる。これは，(ボックスの内容領域は浮動体のために縮小してもよいが，)浮動体が存在する場合でも正しい。
ページ付けしたメディアの改ページに関する情報については，使用可能な改ページを参照すること。
行内フォーマット化文脈では, ボックスは，包含ブロックの最上部から始まって左右方向に交互にレイアウトされる。左右マージン，境界及びパディングは，これらのボックス間で保存される。ボックスは様々な方法で上下方向に揃えてもよい。下部又は上部で揃えてもよいし，内部のテキストの基底線を揃えてもよい。長方形領域が行を形成するボックスを含む場合，その長方形領域を行ボックスと呼ぶ。
行ボックスの幅は，包含ブロックによって決定される。行ボックスの高さは，行の高さの計算で与えられる規則によって決定される。行ボックスは，含まれるボックスすべてに対して十分な高さをもつとする。しかし，例えば，基底線が一列に並ぶようにボックスを揃える場合は，含まれる最も高いボックスよりも高くともよい。ボックスBの高さがそれを含む行ボックスの高さより低い場合は，行ボックス内のBの上下の揃えは，'vertical-align'特性によって決定される。
行内ボックスの幾つかが左右方向に関して一つの行ボックス内に収まらない場合は，それら行内ボックスは，二つ以上の上下に積み重なった行ボックス間に分散される。そこで，段落は，行ボックスが上下に積み重なったものになる。行ボックスは，上下の区切りなしで積み重なるが，重複することはない。
一般に, 行ボックスの左辺は包含ブロックの左辺に接触し，右辺は包含ブロックの右辺に接触する。しかし，浮動ボックスは，包含ブロックの辺と行ボックスの辺との間に入ることもある。そこで，同じ行フォーマット化文脈にある行ボックスは一般に同じ幅(包含ブロックの幅)をもつが，利用可能な左右方向の空間が浮動体によって削減される場合は，行ボックスの幅は様々となってよい。同じ行内フォーマット化文脈にある行ボックスの高さは，一般に様々となってよい。例えば，ある行は高さの高い画像を含み，別の行はテキストだけを含む，などとなる。
ある行の行内ボックスの幅の合計が，それらを含む行ボックスの幅よりも小さい場合，行内ボックスが行ボックス内で左右方向に分散するかどうかは，'text-align'特性によて決定される。特性が値'justify'をもつ場合は，利用者エージェントは，行内ボックスを同様に拡張してよい。
行内ボックスは行ボックスの幅を超えてはならないので，長い行内ボックスは複数のボックスに分割され，幾つかの行ボックスをまたがって分散される。行内ボックスが分割される場合，マージン，境界及びパディングは，分割が発生した部分では視覚的効果をもたない。マージン，境界及びパディングのフォーマット化は，分割が双方向埋込みの内部で発生する場合には，十分には定義されない場合がある。
行内ボックスも双方向テキスト処理のために，同じ行ボックスの内部で幾つかのボックスに分割されてもよい。
行内ボックス構成の例を次に示す。HTMLブロックレベル要素Pによって生成される次の段落は，EM要素及びSTRONG要素を用いて変化をつけた匿名テキストを含む。
P要素は，五つの行内ボックスを包含するブロックボックスを生成する。そのうちの三つは匿名となっている。 段落をフォーマットするために，利用者エージェントはこれら五つのボックスを行ボックスに流し込む。この例では，P要素に対して生成されるボックスが，行ボックスのための包含ブロックを確立する。包含ブロックの幅が十分に広い場合，すべての行内ボックスは単一の行ボックスに収まることになる。
包含ブロックの幅が狭い場合は, 行内ボックスは分割され，複数の行ボックスをまたがって分散される。例えば，先の段落は次のとおりに分割されるかもしれない。
この例では, EMボックスは二つのEMボックスに分割された。これらを"分割1"及び"分割2"と呼ぶことにする。分割1の後又は分割2の前では，マージン，境界，パディング又はテキスト装飾は，視覚的効果をもたない。
次の例を検討する。
Pの幅に依存して，ボックスは次のとおりに分割されてもよい。
ボックスが一度通常のフローに従ってレイアウトされた場合，そのボックスをこの位置に対して相対的にずらしてもよい。これを相対位置決めと呼ぶ。この方法でボックス(B1)をずらしても，後続するボックス(B2)には何の影響も及ぼさない。すなわち，B2は，B1がずらされていないものとして位置を与えられ，B1のオフセットが適用される後に，再位置決めされることはない。これは，相対位置決めによってボックスが重なる場合があることを意味する。
相対位置決めされたボックスは，行区切り及び本来それらに確保されている空間を含む，通常のフローのサイズを維持する。相対位置決めされたボックスは，通常のフローの子供及び位置決めされた子孫に対して，新しい包含ブロックを確立する。
相対位置決めされたボックスは，要素の'position'特性が値'relative'をもつ場合に生成される。オフセットは，'top'特性，'bottom'特性，'left'特性及び'right'特性によって指定される。
相対位置決めされたボックスの動的な動きは，スクリプト環境でのアニメーション効果を生成することができる('visibility'特性も参照すること)。相対位置決めは，上付き添え字及び下付き添字を付ける一般的な形式として使用してもよいが，行の高さは自動的に調整されないので，その位置決めを考慮にいれる必要がある。更なる情報に対しては行の高さの計算を参照すること。
相対位置決めの例は，通常のフロー，浮動及び絶対位置決めの比較で示す。
浮動体は，現在の行において左又は右にずれるボックスとする。浮動体(すなわち，"浮動される"ボックス又は"浮動する"ボックス)の最も興味深い特徴は，内容が辺に沿って流し込まれてもよいこと(又は'clear'特性によってそれが禁止されてもよいこと)である。内容は，左浮動ボックスの右側の下，及び右浮動ボックスの左側の下に流し込まれる。浮動体の位置決め及び内容の流し込みについて以降に示す。浮動体の振る舞いを支配する厳密な規則は，'float'特性で提供される。
浮動ボックスは，明示的な幅をもたなければならない。明示的な幅は，置換要素の場合は，'width'特性, 又はその組込み幅によって割り当てられる。浮動ボックスはいずれも，外辺が包含ブロックの辺又は別の浮動体の外辺に接触するまで左又は右にずらされるブロックボックスとなる。浮動ボックスの上は，現在の行ボックスの上に揃えられる。行ボックスが存在しない場合は，その前のブロックボックスの下に揃えられる。現在の行に浮動体のための左右方向の空間が十分に存在しない場合は，空間がある行まで，一行ずつ下向きに，その浮動体はずらされる。
浮動体は流れの中にないので，浮動ボックスの前後で生成される位置決めされないブロックボックスは，浮動体が存在しないものとして，上下方向に流し込まれる。しかし，浮動ボックスの次に生成される行ボックスは，浮動ボックスのための空間を作るために短くされる。浮動ボックスの前の現在の行にある内容はいずれも，浮動体の他(後)の辺の利用可能な最初の行に再び流し込まれる。
複数の浮動体が隣接してもよい。このモデルは，同じ行の中の隣接する浮動体にも適用される。
次の規則は，class="icon"を用いてすべてのIMGボックスを左に浮動する。左マージンは，'0'に設定している。
次のHTMLソース及びスタイルシートを検討する。 IMGボックスは左に浮動する。後続する内容は，その浮動体の右にフォーマットされ，浮動体と同じ行から始まる。浮動体の右の行ボックスは，浮動体が存在するために短かくされるが，浮動体の後では"通常の"幅(P要素によって設定される包含ブロックの幅)となる。この文書は，フォーマットされて次となる。
文書が次の場合は，フォーマット化は厳密に同じになる。
これは，浮動体の左の内容が，浮動体によって取り消され，右側で下向きに新たに流し込まれることによる。
浮動ボックスのマージンは，決して，隣接するボックスのマージンでつぶされない。そこで，この例では，上下マージンは，Pボックスと浮動IMGボックスとの間でつぶされない。
通常のフローでは，浮動体は他のボックスと重なることができる。例えば，浮動体の次にある通常のフローのボックスが負のマージンをもつ場合がそうである。行内ボックスが浮動体と重なる場合，行内ボックスの内容，背景及び境界は，浮動体の前面でレンダリングされる。ブロックボックスが重なる場合は，ブロックボックスの背景及び境界は，浮動体の背面でレンダリングされ，ボックスが透過的な部分でだけ見える。ブロックボックスの内容は，浮動体の前面でレンダリングされる。
次の図では，浮動体が通常のフローにある要素の境界と重なる場合，何が起こるかをを示す。
浮動する画像は，重なるブロッボックスの境界を不明瞭にする。
次に，内容が浮動体の側面に流し込まれないために，'clear'特性を使用する例を示す。
次の規則を仮定する。
これをフォーマットすると，次となる。
この特性は，ボックスが左に浮動するのがよいか，右に浮動するのがよいか，又は全く浮動しないのがよいかを指定する。この特性は，絶対位置決めされないボックスを生成する要素に対して設定してよい。この特性の値には，次の意味がある。
次に，厳密な規則を示す。これは，浮動体の振る舞いを支配する。 この特性は，要素のボックスのどの側が先行するボックスに隣接しないかを示す。要素自体が浮動する子孫をもっていてもよい。その場合，'clear'特性はそれらに影響を及ぼさない。
この特性は，浮動体を含むブロックレベル要素に対してだけ指定してよい。コンパクトボックス及びランインボックスに対しては, この特性は，コンパクトボックス又はランインボックスが属するブロックボックスに適用される。
非浮動ブロックボックスに適用される場合は，値は次の意味をもつ。 この特性が浮動要素に設定される場合，浮動体の位置決めのための規則は修正されることになる。付加的な制約(番号10)が追加される。
絶対位置決めモデルでは, ボックスは包含ブロックに関して明示的に位置指定される。ボックスは，通常のフローから完全に除去される。後の兄弟に何の影響も及ぼさない。絶対位置決めしたボックスは，通常のフローの子供及び位置決めされる子孫に対して，新しい包含ブロックを確立する。しかし，絶対位置決めした要素の内容は，その他のボックスの周囲を流し込まれることはない。それらは，重複するボックスのスタックレベルに依存して，他のボックスの前面にきたり，背面にきたりする。
この標準情報(TR)における絶対位置決めした要素(又はそのボックス)への参照は，要素の'position'特性が'absolute'又は'fixed'という値をもつことを意味する。
固定位置決めは，絶対位置決めのサブカテゴリとする。両者の相違点は，固定位置決めされるボックスに対しては，包含ブロックが表示域によって確立されることだけとする。連続メディアに対しては, 固定ボックスは，文書がスクロールされる場合に移動しない。この点で，固定ボックスは，固定背景画像と類似している。ページ付けしたメディアの場合は，固定位置をもつボックスは，すべてのページで繰り返される。これは，例えば，各ページの下部に署名を置く場合に有用になる。
文書作成者は，固定位置決めを使用して，フレームに類似した表示を生成してもよい。次のフレームレイアウトを検討する。 これは，次のHTML文書及びスタイル規則を用いて達成されるかもしれない。
ボックス生成及びレイアウトに影響を及ぼす三つの特性，'display'，'position'及び'float'は，次のとおりに相互作用する。
備考
CSS2は，これらの特性の値がスクリプトによって変更される場合，レイアウトの振る舞いを指定しない。例えば，'width:auto'をもつ要素が再位置決めされると何が起こるか。内容が再び流し込まれるか，又は元のフォーマットを維持するか。その答えは，この文書の規定範囲外であって，それらの振る舞いはCSS2の初期実装で異なることが多い。
通常のフロー，相対位置決め，浮動体及び絶対位置決めの間の相違を示すために，次のHTML素片に基づく一連の例を提供する。
この文書では，次の規則を仮定する。 outer要素及びinner要素が生成するボックスの最終位置は，各例で異なる。以下の各図では，図の左側の番号は，通常のフローの位置を示す。明確に示すために，行間を2倍にしている。(図は，異なる左右スケール及び上下スケールを使用していることに注意。)
ボックスの通常のフローを変更しない，outer及びinnerに対して，次のCSS宣言を検討する。
P要素は，すべての行内内容，すなわち，匿名の行内テキスト及び二つのSPAN要素を含む。そのために，内容はすべて，P要素が確立する包含ブロック内の行内フォーマット化文脈でレイアウトされることになり，次の図を生成する。
相対位置決めの効果を見るために，次を指定する。 テキストは，通常，outer要素まで流し込まれる。outerテキストは，行1の最後で通常のフローの位置及び寸法へと流し込まれる。その後，3行に渡って分散されたテキストを包含する行内ボックスは，(上向きに)'-12px'を一単位としてずらされる。
outerの子供としてのinnerの内容は，通常，1.5行目の"of outer contents"という句の直後に流し込まれる。しかし，inner内容は，それ自体，outer内容に対して相対的に(下向きに)'12px'ずらされ，行2の元の位置に戻る。
outerに後続する内容は，outerの相対位置決めによって影響されない点に注意すること。 outerの相対位置が'-24px'であった場合は，outerのテキスト及び本体テキストが重複する点にも注意すること。
今度は，inner要素のテキストを次の規則によって右に浮動する場合の効果を検討する。
テキストは，通常，innerボックスの所まで流し込まれるが，innerボックスは流れからは取り出され，右余白へと浮動させられる。ただし，その右マージンの'width'は，明示的に割り当てられているとする。浮動体の左側の行ボックスは短縮され，文書の残りのテキストがそこに流し込まれる。
'clear'特性の効果を示すために，兄弟要素を例に追加する。
次の規則を適用する。
この規則によって，innerボックスは以前と同様に右に浮動し，文書の残りのテキストは空き空間に流し込まれる。 しかし, 兄弟要素の'clear'特性が'right'に設定される場合，すなわち，生成される兄弟ボックスが右に浮動するボックスの隣に位置することが受け入れられない場合は，兄弟内容は，浮動体より下に流し込まれ始める。
最後に, 絶対位置決めの効果を検討する。outer及びinnerに関する次のCSS宣言を検討する。 この規則によって，outerボックスの上辺は，その包含ブロックに関して位置決めされる。位置決めされたボックスに対する包含ブロックは，最も近くに位置決めされている先祖によって確立されるか，又は何も存在しない場合は，この例と同様に，初期包含ブロックによって確立される。outerボックスの上辺は，包含ブロックの上辺より下に'200px'にあり，outerボックスの左辺は，包含ブロックの左辺から右に'200px'にある。outerの子ボックスは，親に関して通常のとおりに流し込まれる。
次の例は，相対位置決めしたボックスの子である絶対位置決めしたボックスを示している。親であるouterボックスは，実際は，オフセットではないが，その'position'特性を'relative'に設定することによって，このボックスは，位置決めされた子孫の包含ブロックとして提供されてもよい。outerボックスは，複数行に分割される行内ボックスなので，以下の図で太い破線で描写されている最初の行内ボックスの上辺及び左辺は，'top'及び'left'のオフセットのための参照として有用となる。
これをフォーマットすると，次のようになる。 outerボックスを位置決めしない場合を検討する。 この場合，innerに対する包含ブロックは，(例における)初期包含ブロックとなる。次の図は，innerボックスがこの場合どこで終了するかを示している。
相対位置決め及び絶対位置決めは，次の例で示すとおり，変更バーを実装するために使用してもよい。
これをフォーマットすると，次のようになる。 まず，段落(その包含ブロックの両側が，次の図で示されている。)は，通常どおりに流し込まれる。その後，段落の左辺を，包含ブロックの左辺から'10px'ずらす。そこで，'10px'の右マージンがオフセットに先行して確保されている。変更バーとして動作する二つのハイフンは，流れから取り出され，'top: auto'のために，現在行に，最終位置のPによって確立される包含ブロックの左辺から'-1em'右に位置決めされる。その結果，変更バーは，現在行の左に"浮動"するように見える。
以降の箇条では，"前面に"という表現は，利用者が画面に向かう際に，利用者により近いということを意味する。 CSS2では，各ボックスは3次元空間に位置を占める。左右方向の位置，上下方向の位置に加え，ボックスは，"z-軸"に沿っても置かれ，他のボックスの上にフォーマットされる。z-軸位置は，ボックスが視覚的に重なる場合に，特に意味がある。9.9では，ボックスがどのようにz-軸に沿って位置決めされるかを示す。
各ボックスは，一つのスタック文脈に属する。与えられたスタック文脈にある各ボックスは，整数のスタックレベルをもつ。ここで，スタックレベルとは，同じスタック文脈の他のボックスに相対的なz-軸上の位置とする。より高いスタックレベルをもつボックスは，常に，より低いスタックレベルをもつボックスの前面にフォーマットされる。ボックスは，負のスタックレベルをもってもよい。一つのスタック文脈において同じスタックレベルをもつボックスは，文書ツリーの順序に従って，底から上へと積み重ねられる。
ルート要素はルートスタック文脈を生成するが，他の要素が局所スタック文脈を確立してもよい。スタック文脈は継承される。局所スタック文脈は原子的とする。そこで，他のスタック文脈にあるボックスが，局所スタック文脈のボックスのいずれかの間に来てはならない。
局所スタック文脈を確立する要素は，二つのスタックレベルをもつボックスを生成する。これらスタックレベルの一つは，生成されるスタック文脈に対するスタックレベル(常に'0')であって，もう一つはボックスが属するスタック文脈のスタックレベルとする。これは，'z-index'特性によって提供される。
'z-index'特性で異なるスタックレベルが提供されない場合は，要素のボックスは，その親のボックスと同じスタックレベルをもつ。
位置決めされたボックスに対して，'z-index'特性は，次を指定する。
値は，次の意味をもつ。
次の例では，"id"属性を用いて命名されたボックスのスタックレベルは，"text2"=0，"image"=1，"text3"=2，及び"text1"=3となる。"text2"スタックレベルは，ルートボックスから継承される。他は，'z-index'特性を用いて指定される。
この例は，透過性の概念を例示している。ボックスのデフォルトの振る舞いは，そのボックスの背後のボックスが，その文脈の透過領域を通して見えるようになっている。例では，各ボックスが，その下のボックスの上に透過的に覆い被さっている。この振る舞いは，既存の背景特性の一つを用いることで上書きできる。
スクリプトによっては，文字が右から左へとに書かれるものもある。特にアラビア語又はヘブライ語のスクリプトで書かれる文書，及び複数の言語が混在する文脈では，単一の視覚的に表示されるブロックのテキストには，方向性が混在して現われることがある。この現象は，双方向性, 又は短縮して"bidi"と呼ばれる。
Unicode規格([UNICODE], 3.11)は，テキストに適した方向性を決定するための複雑なアルゴリズムを定義している。アルゴリズムは，文字特性に基づく暗黙的な部分から構成されると同時に，埋込み及び上書きのための明示的な制御からも構成される。CSS2は，このアルゴリズムに依存して適正な双方向レンダリングを実現する。'direction'特性及び'unicode-bidi'特性によって，文書作成者は，文書で使用する言語の要素及び属性をこのアルゴリズムへと対応付ける方法を指定できる。
文書が左向きの文字を含む場合，及び利用者エージェントがこれらの文字を，疑問符，16進符号，ブラックボックスなどの任意の代替ではなく適正なグリフを用いて表示する場合は，利用者エージェントは，双方向アルゴリズムを適用しなければならない。この一見一方的な要求は，ヘブライ語又はアラビア語の文書のすべてが方向性の混在するテキストを含んでいるわけではないが，これら文書は，右向きの言語で書かれた文書以外に，数字，他の言語からのテキストなど，右向きのテキストを含むことが多いという事実を反映している。
テキストの方向性は文書の構造及びセマンティクスに依存するので，これらの特性は，ほとんどの場合，文書型記述(document type description，DTD)の設計者又は特定の文書の文書作成者だけが使用することが望ましい。デフォルトスタイルシートがこれらの特性を指定する場合，文書作成者及び利用者は，それらを上書きする規則を指定しないほうがよい。利用者エージェントが，通常ヘブライ文字で書かれているイディッシュ語を利用者の要求でラテン文字に書き直す場合は，典型的な例外として，利用者エージェントの双方向性の振る舞いを上書きすることになる。
HTML 4.0規定([HTML40], 8.2)は，HTML要素の双方向性の振る舞いを定義する。そのために，適合するHTML利用者エージェントは，文書作成者及び利用者のスタイルシートにある'direction'特性及び'unicode-bidi'特性を無視してもよい。[HTML40]で指定される双方向性の振る舞いを実現するスタイルシートはスタイルシートの例で与えられる。HTML 4.0規定は，双方向性の問題についてもより多くの情報を含んでいる。
この特性は，ブロックの基本表記方向，Unicode双方向アルゴリズムの埋込み及び上書き('unicode-bidi'参照)の方向を指定する。さらに，この特性は，表の列のレイアウトの方向，左右方向のオーバフローの方向，及び'text-align:justify'の場合の不完全なブロック最終行不完全の位置を指定する。
この特性に対する値は，次の意味をもつ。 'direction'特性が行内レベル要素に影響するためには，'unicode-bidi'特性の値は，'embed'又は'override'でなければならない。
備考
表の列要素に対して指定される場合，'direction'特性は，列のセルによって継承されない。これは，列が文書ツリーに存在しないことによる。このために，CSSは，[HTML40]の11.3.2.1で示される"dir"属性継承規則を容易に捉えることができない。
この特性に対する値は，次の意味をもつ。 各ブロックレベル要素における文字の最終的な順序は，双方向性制御符号がこのように追加され，マーク付けが除去され，結果として生じる文字列が，スタイル指定されたテキストと同じ行区切りを生成したプレーンテキスト用のUnicode双方向アルゴリズムの実装に渡されるものとしての順序と同じになる。この過程では，'unicode-bidi'特性が'normal'以外の値をもたない場合，画像などの非テキスト実体は，中立的な文字として処理される。この場合, 非テキスト実体は，要素に対して指定される'direction'で，強調文字として取り扱われる。
一様の方向で，すなわち，完全に右向きとするか又は完全に左向きとするかのいずれかで，行内ボックスを流し込めるようにするために，匿名行内ボックスを含む，より多くの行内ボックスを生成しなければならない場合もあるし，行内ボックスを流し込む前に，分割して並び替えなければならない場合もある。
Unicodeアルゴリズムが15レベルの埋込み制限をもつので，適切ではない場合には，'normal'以外の値をもつ'unicode-bidi'を使用しないように注意することが望ましい。特に，'inherit'という値は，極度の注意をもって使用するほうがよい。しかし，一般にブロックとしての表示を意図されている要素に対しては，表示を行内に変更する場合，その要素をいっしょに保持するよりも'unicode-bidi: embed'を設定するほうがよい(次の例を参照)。
次の例は，双方向テキストを用いたXML文書を示す。重要な設計原理を説明している。DTD設計者は，言語適正(要素及び属性)においても，添付するスタイルシートにおいても，双方向性を考慮することが望ましい。双方向性規則を他のスタイル規則から分離するようにスタイルシートを設計するのがよい。文書言語又はDTDの双方向性の振る舞いを保存するために，他のスタイルシートが双方向性規則を上書きしないようにするのがよい。
この例では，小文字は本質的に右向きの文字を表し，大文字は本質的に左向きの文字を表す。
これはXMLなので，スタイルシートは，表記方向の設定に責任がある。次にそのスタイルシートを示す。 HEBREW要素は左向きの基底方向をもつブロックとし，ENGLISH要素は右向きの基底方向をもつブロックとする。PARは，親から基底方向を継承するブロックとする。そこで，最初の二つのPARは右上から開始して読み取られ，最後の三つは左上から開始して読み取られる。HEBREW及びENGLISHは，明示性だけのために要素名として選択されていることに注意すること。一般に，要素名は言語への参照とは無関係に構造を伝達することが望ましい。
EMPH要素は，行内レベルであって，'unicode-bidi'の値が'normal'(初期値)なので，テキストの順序付けには影響しない。一方で，HE-QUO要素は，埋込みを生成する。
行の長さが長い場合，このテキストのフォーマットは，次のようになるかもしれない。
HE-QUO埋込みによって，HEBREW18がenglish19の右にくることに注意すること。
行を区切らなければならない場合は，次となる。
HEBREW18をenglish19の前に読まなければならないので，HEBREW18は，english19より上の行に存在する。より以前のフォーマット化で長い行を区切ることは機能しない。english19からの最初の音節は前の行でも問題なかったかもしれないが，左向きの文脈における右向きの単語のハイフン付け又はその逆は，行の途中でハイフンを表示しなければならないことを避けるために，通常は抑制される点にも注意すること。
値: <length> | <percentage> | auto | inherit
初期値: auto
適用対象: 位置決めされる要素
継承: しない
パーセント値: 包含ブロックの幅を参照する
メディア: 視覚メディア
値: <length> | <percentage> | auto | inherit
初期値: auto
適用対象: 位置決めされる要素
継承: しない
パーセント値: 包含ブロックの高さを参照する
メディア: 視覚メディア
値: <length> | <percentage> | auto | inherit
初期値: auto
適用対象: 位置決めされる要素
継承: しない
パーセント値: 包含ブロックの幅を参照する
メディア: 視覚メディア
9.4 通常のフロー
9.4.1 ブロックフォーマット化文脈
9.4.2 行内フォーマット化文脈
<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>
Several emphasized words appear in this sentence, dear.
Several emphasized words appear
in this sentence, dear.
次のようになってもよい。
Several emphasized
words appear in this
sentence, dear.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Example of inline flow on several lines</TITLE>
<STYLE type="text/css">
EM {
padding: 2px;
margin: 1em;
border-width: medium;
border-style: dashed;
line-height: 2.4em;
}
</STYLE>
</HEAD>
<BODY>
<P>Several <EM>emphasized words</EM> appear here.</P>
</BODY>
</HTML>
9.4.3 相対位置決め
9.5 浮動体
IMG.icon {
float: left;
margin-left: 0;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Float example</TITLE>
<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
</HEAD>
<BODY>
<P><IMG src=img.gif alt="This image will illustrate floats">
Some sample text that has no other...
</BODY>
</HTML>
<BODY>
<P>Some sample text
<IMG src=img.gif alt="This image will illustrate floats">
that has no other...
</BODY>
P { clear: left }
9.5.1 浮動体の位置決め
('float'特性)
9.5.2 浮動体に隣接する流れの制御
('clear'特性)
9.6 絶対位置決め
9.6.1 固定位置決め
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS2</TITLE>
<STYLE type="text/css">
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> ... </DIV>
<DIV id="sidebar"> ... </DIV>
<DIV id="main"> ... </DIV>
<DIV id="footer"> ... </DIV>
</BODY>
</HTML>
9.7 'display'，'position'及び'float'の間の関係
9.8 通常のフロー，浮動体及び絶対位置決めの比較
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
<SPAN id="outer"> Start of outer contents.
<SPAN id="inner"> Inner contents.</SPAN>
End of outer contents.</SPAN>
End of body contents.
</P>
</BODY>
</HTML>
BODY { display: block; line-height: 200%;
width: 400px; height: 400px }
P { display: block }
SPAN { display: inline }
9.8.1 通常のフロー
#outer { color: red }
#inner { color: blue }
9.8.2 相対位置決め
#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }
9.8.3 ボックスの浮動
#outer { color: red }
#inner { float: right; width: 130px; color: blue }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes II</TITLE>
</HEAD>
<BODY>
<P>Beginning of body contents.
<SPAN id=outer> Start of outer contents.
<SPAN id=inner> Inner contents.</SPAN>
<SPAN id=sibling> Sibling contents.</SPAN>
End of outer contents.</SPAN>
End of body contents.
</P>
</BODY>
</HTML>
#inner { float: right; width: 130px; color: blue }
#sibling { color: red }
#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }
9.8.4 絶対位置決め
#outer {
position: absolute;
top: 200px; left: 200px;
width: 200px;
color: red;
}
#inner { color: blue }
#outer {
position: relative;
color: red
}
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
#outer { color: red }
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>
9.9 階層化表示
9.9.1 スタックレベルの指定
('z-index'特性)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Z-order positioning</TITLE>
<STYLE type="text/css">
.pile {
position: absolute;
left: 2in;
top: 2in;
width: 3in;
height: 3in;
}
</STYLE>
</HEAD>
<BODY>
<P>
<IMG id="image" class="pile"
src="butterfly.gif" alt="A butterfly image"
style="z-index: 1">
<DIV id="text1" class="pile"
style="z-index: 3">
This text will overlay the butterfly image.
</DIV>
<DIV id="text2">
This text will be beneath everything.
</DIV>
<DIV id="text3" class="pile"
style="z-index: 2">
This text will underlay text1, but overlay the butterfly image
</DIV>
</BODY>
</HTML>
9.10 テキスト方向
('direction'特性及び'unicode-bidi'特性)
値: ltr | rtl | inherit
初期値: ltr
適用対象: すべての要素, ただし以降を参照
継承: する
パーセント値: N/A
メディア: 視覚メディア
値: normal | embed | bidi-override | inherit
初期値: normal
適用対象: すべての要素, ただし以降を参照のこと。
継承: しない
パーセント値: N/A
メディア: 視覚メディア
<HEBREW>
<PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR>
<PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR>
</HEBREW>
<ENGLISH>
<PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR>
<PAR>english14 english15 english16</PAR><PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR>
</ENGLISH>
/* Rules for bidi */
HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed}
ENGLISH {direction: ltr; unicode-bidi: embed}
/* Rules for presentation */
HEBREW, ENGLISH, PAR {display: block}
EMPH {font-weight: bold}
5WERBEH 4WERBEH english3 2WERBEH 1WERBEH
8WERBEH 7WERBEH 6WERBEH
english9 english10 english11 13WERBEH 12WERBEH
english14 english15 english16
english17 20WERBEH english19 18WERBEH
2WERBEH 1WERBEH
-EH 4WERBEH english3
5WERB
-EH 7WERBEH 6WERBEH
8WERB
english9 english10 en-
glish11 12WERBEH
13WERBEH
english14 english15
english16
english17 18WERBEH
20WERBEH english19
