ボックスの配置

目次

ボックスは

• 通常フロー
• フロート
• 絶対位置決め

という三つの配置体系(positioning scheme)によって、どのように配置されるかが決まります。以下では三つの配置体系と、配置されたボックスの位置を相対的に動かす相対位置決め、ボックスの重なりについて説明します。

1. ボックスの配置
2. 通常フロー
   1. ブロック整形文脈
   2. インライン整形文脈
3. フロート
   1. フロートのクリア
4. 絶対位置決め
   1. 絶対配置
   2. 固定配置
5. 相対位置決め
6. ボックスの重なり

ボックスの配置

ボックスの配置を決めるのがpositionプロパティです。

static

ボックスを通常フローで配置します。

relative

通常フローで配置されたボックスの位置を指定されたオフセット量だけ相対的に変化させます。

absolute

ボックスを絶対位置決めします。ボックスの位置は、包含ブロックからのオフセット量で決まります。

fixed

ボックスを絶対位置決めします。ボックスの位置は、表示域やページボックスからのオフセット量で決まります。

positionプロパティの値が"static"以外の要素を位置決めされた(positioned)要素と言います。position:staticの要素は位置決めされていない(non-positioned)要素です。位置決めされたボックスのオフセット量は、topプロパティ、bottomプロパティ、leftプロパティ、rightプロパティによって指定します。

通常フロー

通常フローにあるボックスは、整形文脈に属します。整形文脈にはブロックボックスが属するブロック整形文脈と、インラインボックスが属するインライン整形文脈があります。

フロート

floatプロパティに"left"か"right"が指定された要素の生成するボックスをフロート(float)と言います。フロートは一般に「回り込み」と説明されますが、大雑把には次のような仕様になっています(float:leftの場合、float:rightなら左右逆)。

1. フロートを通常フローから取り除き、左外辺が包含ブロックの左辺か別の左フロートの左外辺に接するまで左に移動する。
2. 行ボックスがあるなら、フロートの上外辺を行ボックスの上辺に揃える。
3. 水平方向にフロートを収めるスペースがないなら、フロートを下に押し下げる。
4. フロートは通常フローに属さないため、位置決めされていないブロックボックスはフロートが存在していないかのように、垂直に配置される。
5. 行ボックスの幅はフロートの幅を確保するために短くなる。
6. フロートに続く内容は、フロートの右の行ボックスに流し込む。
7. フロートの直前の行に含まれる内容は、フロートの右の行ボックスに流し込む。
8. 短縮された行ボックスが内容を収めるのには短すぎるなら、その内容を下に押し下げる。
9. 通常フローに新しいブロック整形文脈を設置する要素、置換ブロックレベル要素、表要素(display:table)のボックスのマージンは、同ブロック内にあるどのフロートとも重なってはいけない。(必要なら、それらの要素をフロートの下に押し下げる。)

フロートはブロックボックスとなり、新たなブロック整形文脈を形成します。フロートの中は通常フロー配置となります。

float:noneの場合はフロートになりません。

例1

<p>
<span>floating box</span>
最初の段落です。フロートの幅の分だけ
行ボックスが短くなっているのが分かる
と思います。
</p>
<p>
ここが次の段落です。この段落でも行ボックスの
短縮が起こります。
</p>

span {
 float: left;
 width: 5em; height: 10em;
 border: 1px solid blue }
p { border: 1px solid red }

注目したい点は、フロートがない場合でもp要素のボックスが図と同じように配置されることです。一つめのボックスがフロートを含めるように長くなったり、次のボックスがフロートと重ならないよう下に下がったりはしません。フロートは通常フローからは取り除かれているからです。

例2

<p>
フロートの前の内容です。
<span>floating box</span>
フロートの後の内容です。
</p>

span {
 float: left;
 width: 5em; height: 5em;
 border: 1px solid blue }
p { border: 1px solid red }

上記のルール7により、フロートの直前の行の内容がフロートの右に流し込まれています。

例3

<p>
<span>floating box</span>
Supercalifragilisticexpialidocious
</p>

span {
 float: left;
 width: 5em; height: 5em;
 border: solid 1px blue }
p {
 width: 10em;
 border: solid 1px red
}

「Supercalifragilisticexpialidocious」はフロートの右に流し込むには行ボックスが短すぎます。そのため、上記のルール8によりフロートの下へ移動します。

例4

<p>
<span>floating box1</span>
<span>floating box2</span>
フロートの後の内容です。
</p>

span {
 float: left;
 width: 5em; height: 5em;
 border: 1px solid blue }
p { border: 1px solid red }

左フロートが連続する場合、後続するフロートは先行するフロートの左外辺に接するまで移動します。(ルール1)

例5

<p>
<span>floating box1</span>
<span>floating box2</span>
フロートの後の内容です。
</p>

span {
 float: left;
 width: 5em; height: 5em;
 border: 1px solid blue }
p {
 width: 9em;
 border: 1px solid red
}

上とほぼ同じコードですが、p要素をwidth:9emとしたため、フロートを二つ横に並べることができなくなりました。そのため、ルール3により後続するフロートが先行するフロートの下に押し下げられています。

フロートにはさらに厳密なルールが定められています(float:leftの場合、float:rightなら左右逆)。便宜上、これを厳密ルールと呼ぶことにします。

1. 左フロートの左外辺は包含ブロックの左辺より左にならない。
2. 現在のボックスが左フロートであり、かつソース文書中で前にある要素によって生成される左フロートがあるなら、それぞれの先行ボックスについて、現在のボックスの左外辺は先行ボックスの右外辺より右でなければならない、もしくは上外辺が先行ボックスの下外辺より下でなければならない。
3. 左フロートの右外辺は、その右にある右フロートの左外辺より右にはならない。
4. フロートの上外辺は包含ブロックの上辺より上にはならない。フロートが相殺される二つのマージンの間にあるとき、フロートはそのフローにある空の匿名ブロックボックスを親に持っているものとして配置される。
5. フロートの上外辺は、ソース文書中で前にある要素により生成されるブロックボックスやフロートの上外辺よりも上にならない。
6. フロートの上外辺は、ソース文書中で前にある要素により生成されるボックスを含む行ボックスの上辺よりも上にならない。
7. 左に別の左フロートを持つ左フロートは、その右外辺が包含ブロックの右辺よりも右にならない。
8. フロートはできるだけ上に配置しなければならない。
9. 左フロートはできるだけ左に配置しなければならない。より左に配置することよりも、上に配置することを優先する。
10. clearプロパティが宣言されたフロートの上外辺は、clear:leftの場合は先行する全ての左フロートの下外辺よりも下、clear:rightの場合は右フロートの下外辺よりも下、clear:bothの場合はどちらのフロートの下外辺よりも下でなければならない。

フロートを利用して段組を組むときは、この厳密なルールをよく理解しておくことが必要になります。

例6

<div id="container">
<div id="boxA">boxA</div>
<div id="boxB">boxB</div>
<div id="boxC">boxC</div>
</div>

div#container {
 width: 300px;
 overflow: auto;
 border: 2px solid black
}
div#boxA {
 float: left;
 width: 50px;
 background: #ffcfce
}
div#boxB {
 float: left;
 width: 150px; background: #cecfff
}
div#boxC {
 float: left;
 width: 100px;
 background: #ceffce
}

boxA、boxB、boxCの包含ブロックの幅は300pxであり、各ボックスを横に並べるとちょうど収まります。このような場合、厳密ルール1によりboxAの左外辺が包含ブロックの左辺に重なり、厳密ルール2、8、9によりboxBとboxCが横に並べられます。boxA、boxB、boxCの上外辺は厳密ルール8、4、5により包含ブロックの上辺に一致します。

例7

<div id="container">
<div id="boxA">boxA</div>
<div id="boxB">boxB</div>
<div id="boxC">boxC</div>
</div>

div#container {
 width: 250px;
 overflow: auto;
 border: 2px solid black
}
div#boxA {
 float: left;
 width: 50px;
 background: #ffcfce
}
div#boxB {
 float: left;
 width: 150px; background: #cecfff
}
div#boxC {
 float: left;
 width: 100px;
 background: #ceffce
}

包含ブロックの幅は250pxであり、boxA、boxBは横に並べられますが、boxCを横に並べると右にはみ出してしまいます。このような場合は厳密ルール7、8、9によりboxCがboxAの下に配置されます。

絶対位置決め

positionプロパティが"absolute"か"fixed"である要素を絶対位置決めされた要素(absolutely positioned element)と言います。絶対位置決めには

• 絶対配置 (position:absolute)
• 固定配置 (position:fixed)

の二つがあります。絶対位置決めされた要素は通常フローから完全に取り除かれます。

相対位置決め

通常フローで配置されたボックスやフロートは、position:relativeを指定すると相対的に位置を変化させることができます。これを相対位置決め(relative positioning)と言います。相対位置決めは他のボックスの配置には全く影響を与えず、相対位置決めされていない他のボックスは相対位置決めされたボックスがそうされていない場合と同じ場所に位置します。

オフセット量はtopプロパティ、bottomプロパティ、leftプロパティ、rightプロパティで指定します。算出値は次のように導出します。

• left:auto; right:autoなら0
• leftプロパティ、rightプロパティのどちらかが"auto"の場合、"auto"でないプロパティの値
• leftプロパティ、rightプロパティがどちらも"auto"でない場合、direction:ltrならleftプロパティの値、direction:rtlならrightプロパティの値

• top:auto; bottom:autoなら0
• topプロパティ、bottomプロパティのどちらかが"auto"の場合、"auto"でないプロパティの値
• topプロパティ、bottomプロパティがどちらも"auto"でない場合、topプロパティの値

例

<div>
span要素の前
<span>position:relative</span>
span要素の後
</div>

span {
 position: relative;
 top: 2em;
 right: 5em;
 border: 1px solid red
}
div {
 position: relative;
 border: 1px solid blue
}

span要素を相対位置決めしています。span要素の前後の匿名インラインボックスは、span要素のボックスが移動する前と同じ位置に配置されます。

ボックスの重なり

ボックスは水平・垂直方向に加えてz軸方向の位置を持ちます。絶対位置決め、相対位置決めなどによってボックスどうしが重なるときは、z軸において上にあるボックスが前面に描画されます。

それぞれのボックスはスタック文脈(stacking context)に属しています。スタック文脈中のボックスは、同じスタック文脈の中にある他のボックスとのz軸上の位置関係を示すスタックレベル(stack level)という整数値を持ちます。スタックレベルの高いボックスほど前面に描画されます。スタックレベルが同じであるボックスは、文書ツリー上の順番にしたがって後ろから前へ積み重ねられます。

z-indexプロパティはボックスの重なりを指定するプロパティです。このプロパティは位置決めされた(positionプロパティが"static"以外の)要素に適用されます。値には<整数値>か"auto"を指定します。<整数値>は現在のスタック文脈中におけるスタックレベルを表し、さらに自身のスタックレベルが"0"である局所スタック文脈(local stacking context)を設置します。つまり、スタック文脈が別のスタック文脈を包含するということです。値が"auto"であれば、現在のスタック文脈におけるスタックレベルは親要素のボックスと同じになり、新たな局所スタック文脈は設置しません。また、ルート要素はルールスタック文脈を設置します。

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Layer test</title>
  </head>
  <body>
    <div id="stack1">
      stack1(z-index:1)
      <div id="stack1-1">
        stack1-1(z-index:3)
      </div>
    </div>
    <div id="stack2">
      stack2(z-index:2)
      <div id="stack2-1">
        stack2-1(z-index:1)
      </div>
    </div>
  </body>
</html>

div#stack1 {
 z-index: 1;
 width: 200px;
 height: 200px;
 position: absolute;
 top: 0; left: 0;
 background-color: #afa
}
div#stack1-1 {
 z-index: 3;
 width: 100px;
 height: 100px;
 position: absolute;
 top: 70px; left: 130px;
 background-color: #99f
 }
div#stack2 {
 z-index: 2;
 width: 200px;
 height: 200px;
 position: absolute;
 top: 100px; left: 100px;
 background-color: #faa
}
div#stack2-1 {
 z-index: 1;
 width: 100px;
 height: 100px;
 position: absolute;
 top: 50px; left: -50px;
 background-color: #fff777
 }

上の例は以下のように表示されます。

まず、ルート要素(html要素)がルートスタック文脈を設置します。その文脈の中で、stack1のスタックレベルは1、stack2のスタックレベルは2となり、stack2がstack1より前面になります。stack2は別のスタック文脈を設置します。その文脈にあるのはstack2とstack2-1で、スタックレベルはそれぞれ0と1になります。よって、最も前面に表示されるのはstack2-1で、その次がstack2です。stack1も別のスタック文脈を設置します。その中ではstack1のスタックレベルが0、stack1-1のスタックレベルが3です。

z-indexプロパティの値は自身が属するスタック文脈におけるスタックレベルです。ですから、その値が大きければ必ず前面に表示されるというわけではありません。例えば、この例ではz-index:1であるstack2-1の方がz-index:3であるstack1-1よりも前になっています。

スタック文脈とスタックレベル

		スタック文脈を設置する要素
		ルート要素	stack1	stack2	stack1-1	stack2-1
要素のスタックレベル	stack1	1	0
	stack2	2		0
	stack1-1		3		0
	stack2-1			1		0

スタック文脈をさらに詳しく見ると、次のようになります。

1. スタック文脈を設置する要素の背景とボーダー
2. 負のスタックレベルを持つ子孫要素のスタック文脈
3. 通常フローにある非インラインレベル要素の子孫要素を含むスタックレベル
4. フロートとその内容のスタックレベル
5. 通常フローにあるインラインレベル要素の子孫のスタックレベル
6. z-index:autoかz-index:0である位置決めされた子孫要素のスタックレベル
7. 正のスタックレベルを持つ子孫要素のスタック文脈

仕様書ではAppendix E. Elaborate description of Stacking Contextsにさらに詳しい説明があります。

Information