配置

CSSではボックスを配置するために次の三種類の方法がある。

通常フロー
ブロックの整形コンテキストやインラインコンキストにおける整形、ブロックもしくはインラインボックスの相対配置、そしてコンパクト及びランインボックスの配置
フロート
ボックスはまず通常フローにてレイアウトされ、しかる後に可能な限り左寄せもしくは右寄せされる。続く内容は、フロートの脇に流し込むこともできる。
絶対配置
ボックスは通常フローから完全に取り除かれ(つまり兄弟要素に影響を与えなくなり)、コンテナブロックからの相対的な位置を与えられる。

position

ボックスの表示位置を指定する属性。この属性で指定できる値をつぎの表に示す。

position属性の値
意味
static 通常フローで配置する。left、top、right、bottomは適用されない
relative 通常フローで配置する位置を決め、その位置からの相対的に配置する
absolute ボックスを絶対的な位置で指定する。
fixed ボックスの位置は絶対配置の場合と同じだが、そのボックスは何かに対して固定される。

ボックスの位置指定属性

static以外で位置を指定する属性をつぎの表に示す。

ボックス位置指定の属性
属性 意  味
top コンテナボックスの上辺からボックスの上辺までの位置指定
right コンテナボックスの右辺からボックスの右辺までの位置指定
bottom コンテナボックスの下辺からボックスの下辺までの位置
left コンテナボックスの左辺からボックスの左辺までの位置

それぞれの属性には数値、パーセンテージ、autoのいずれかの値を指定する。

使用例

絶対指定の配置でボックスを上から100ピクセル、左から100ピクセルの位置に表示する。

P.p1 { position : absolute; top : 100px; left : 100px; }

レイヤー表現

cssのボックスは三次元空間に位置を持つ。その位置を示す属性がz-indexである。

この属性の値は整数値あるいはautoのいずれかである。

複数のボックスが重なり合うとき、この属性の値で表示する順番を決定する。

次の記述のようにz-indexを指定した場合、最大値が最も手前側に表示される。

DIV.L1 {
position : absolute;
top : 0px; left : 0px;
width :100px; height : 100px;
z-index : 1;
}
DIV.L2 {
position : absolute;
top : 100px; left : 100px;
width :100px; height : 100px;
z-index : 2;
}
DIV.L3 {
position : absolute;
top : 200px; left : 200px;
width :100px; height : 100px;
z-index : 3;
}

使用例