位置指定
<div style="width:3em;height:3em;"> </div>
を
div.赤枠{
width:13em;height:15em; border:赤直線;
}
---------
<div class="赤枠"> </div>
width:13em;height:15em; border:赤直線;
}
---------
<div class="赤枠"> </div>
にレイアウトする。
通常フロー
初期状態ではボックスは上からどんどん「積み重ね」られて行く。
あ
い
う
え
お
<div class="赤枠">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>
相対配置
あ
い
う
え
お
<div class="赤枠">
<div>あ</div>
<div style="position:relative;">い</div>
<div>う</div>
<div style="position:relative;">え</div>
<div>お</div>
</div>
<div>あ</div>
<div style="position:relative;">い</div>
<div>う</div>
<div style="position:relative;">え</div>
<div>お</div>
</div>
あ
い
う
え
お
<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>
<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
あ
い
う
え
お
<div class="赤枠">
<div>あ</div>
<div style="position:absolute;">い</div>
<div>う</div>
<div style="position:absolute;">え</div>
<div>お</div>
</div>
<div>あ</div>
<div style="position:absolute;">い</div>
<div>う</div>
<div style="position:absolute;">え</div>
<div>お</div>
</div>
あ
う
お
い
え
<div class="赤枠">
<div>あ</div>
<div>う</div>
<div>お</div>
</div>
<div>あ</div>
<div>う</div>
<div>お</div>
</div>
「い」「え」は通常フローから外れ、「あ」「う」「お」で通常フローを形成する。その後通常フロー「あ」「う」「お」の上に「い」「え」が乗ってくる。
※position:absoluteにするとボックスは通常フローから外される。
絶対配置2
「え」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>
<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: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>
<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; 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>
<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">あああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいい