HTML講座

位置指定

　
<div style="width:3em;height:3em;">　</div>

を

　
div.赤枠{
  width:13em;height:15em; border:赤直線;
}
---------
<div class="赤枠">　</div>

にレイアウトする。

通常フロー

初期状態ではボックスは上からどんどん「積み重ね」られて行く。

通常フロー
あ
い
う
え
お
<div class="赤枠">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>

相対配置

「い」「え」position:relative
あ
い
う
え
お
<div class="赤枠">
<div>あ</div>
<div style="position:relative;">い</div>
<div>う</div>
<div style="position:relative;">え</div>
<div>お</div>
</div>
「い」「え」position:relative;top:-3em;left:3em
あ
い
う
え
お
<div class="赤枠">
<div>あ</div>
<div style="position:relative; top:-3em;left:3em;">い</div>
<div>う</div>
<div style="position:relative; top:-3em;left:3em;">え</div>
<div>お</div>
</div>

通常フローにすべて乗ってから「い」と「う」が移動。

絶対配置1

「い」「え」position:absolute
あ
い
う
え
お
<div class="赤枠">
<div>あ</div>
<div style="position:absolute;">い</div>
<div>う</div>
<div style="position:absolute;">え</div>
<div>お</div>
</div>
cf.「い」「え」を除いた通常フロー
あ
う
お
い
え
<div class="赤枠">
<div>あ</div>
<div>う</div>
<div>お</div>
</div>

「い」「え」は通常フローから外れ、「あ」「う」「お」で通常フローを形成する。その後通常フロー「あ」「う」「お」の上に「い」「え」が乗ってくる。

※position:absoluteにするとボックスは通常フローから外される。

絶対配置2

「い」position:absolute; top:0;left:3em;
「え」position:absolute; bottom:6em;right:7em;
あ
い
う
え
お
<div class="赤枠">
<div>あ</div>
<div style="position:absolute; top:0;left:3em;">い</div>
<div>う</div>
<div style="position:absolute; bottom:6em;right:7em;">え</div>
<div>お</div>
</div>

黒枠を基準に上(top)下(bottom)左(left)右(right)から位置が決まる

絶対配置3

赤枠 position:relative
「い」position:absolute; top:0;left:3em;
「え」position:absolute; bottom:6em;right:7em;
あ
い
う
え
お
<div class="赤枠" style="position:relative;">
<div>あ</div>
<div style="position:absolute; top:0;left:3em;">い</div>
<div>う</div>
<div style="position:absolute; bottom:6em;right:7em;">え</div>
<div>お</div>
</div>

赤枠を基準に上(top)下(bottom)左(left)右(right)から位置が決まる

絶対配置4

「い」position:fixed;top:0;left:3em;
「え」position:fixed; bottom:6em;right:7em;
あ
い
う
え
お
<div class="赤枠">
<div>あ</div>
<divstyle="position:fixed; top:0;left:3em;">い</div>
<div>う</div>
<div style="position:fixed; bottom:6em;right:7em;">え</div>
<div>お</div>
</div>

※fixed－スクロールしても動かない

<body></body>（ブラウザの表示枠）を基準に上(top)下(bottom)左(left)右(right)から位置が決まる

重なりの順位

重なりの順位
positon:relative、position:absolute、position:fixでボックスが重なったときに、どのボックスを上に持ってくるかを指定する。
z-index: 数値(0が基準値、数字が大きくなると上に来る);
記述見え方
初期（後から来たボックスが上に来る）
あああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいい
<div style="position:～; z-index:1">
<div style="position:～; z-index:0">
あああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいい
<div style="position:～; z-index:-1">
<div style="position:～; z-index:0">
あああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいいいいいいい