これまで例で使用したHTML文書中の要素はすべて、上から下、左から右、 へと流し込むように配置された。ユーザエージェントの文書表示枠の 左上を基点として配置を繰り返し、下方向に向かって制限なく延びていく。
この配置規則はposition特性によって定められる。通常の 規則は "static" である。
要素の位置決めを決定する。設定できる値には以下のものがある。
既に配置されたボックスのすぐ下の位置に配置される 通常の位置決め。
通常(static)の位置を基準として、指定した座標ぶんだけ 相対的にずらした位置に配置される。
包含ブロックの配置座標を基準として、指定した座標の 位置に配置される。absolute特性値を持たせた要素は 通常(static)の配置規則から外れるため、つぎに配置する staticな要素は、それ以前に配置されたstatic要素の 下に配置される。
スクロール可能なメディアでの表示の際にもスクロールせず 固定される。
包含ブロックとは、その要素の全ての位置決めの基準となる 祖先要素のことで、通常はbody要素である。ただし、relativeまたはabsolute のposition特性をもつボックスがあれば、 それがその内側の要素の包含ボックスとなる。
static以外の位置決め規則ではボックスの開始位置を、基準となるものから どの程度ずらしたかによって指定する。これをオフセットという。 オフセットは以下の特性値によって決定される。
ボックスの内容の右辺が包含ブロックの右辺からどの程度左にずれて いるかを指定する。
ボックスの内容の左辺が包含ブロックの左辺からどの程度右にずれて いるかを指定する。
ボックスの内容の上辺が包含ブロックの上辺からどの程度下にずれて いるかを指定する。
ボックスの内容の下辺が包含ブロックの下辺からどの程度上にずれて いるかを指定する。
各特性に指定するオフセット値は以下のどれかで指定する。
各辺間の距離を具体的な長さ で指定する。
左右位置指定の場合は包含ブロックの幅、上下位置指定の場合は 包含ブロックの高さを100とした比率で指定する。ただし、包含ブロック の高さが明示的に指定されていない場合はauto(下記)と同じになる。
内容物の大きさなどに応じて自動的に決めることを指定する。
static以外の位置決め規則で上記の特性値を使ってオフセット指定する 例を示す。ただし、オフセット指定による位置決めはCSSへの対応の状況が 完全でないユーザエージェントで、文字が重なるなどの 壊滅的な障害を引き起こす可能性があるので乱用は避けるべきである。
relativeによる指定は本来のボックスの始まる位置から どの程度ずれた位置かを指定する。relativeのボックスが終わった位置が 次の通常フローの開始位置となる。
通常のフロー。
本来の位置から5em右にずれたrelativeボックス。
(left: 5em; top: 0; width: 14em;)
つぎの通常フローはここから
absoluteによる指定は通常フローから隔離されたところに配置される。
通常のフロー。
包含ブロックの上左端から5em右にずれたstaticボックス。
(left: 5em; top: 0; width: 14em;)
つぎの通常フローはここから
fixedによる指定も通常フローから隔離されたところに配置される。 そして、文書をスクロールしてもその位置に留まる。