ポジションレイアウト fixed
positionを使って表示位置を指定
表示位置の指定方法の種類
- static ポジションレイアウトを行わない
- relative 通常の表示位置を基点にした位置指定
- absolute 親要素を基点にした位置指定
- fixed ブラウザ画面を基点にした位置指定
- page ページボックスやリージョンボックスを基点にした位置指定
fixedはbodyを基点にした位置指定
baseをfixedにすると、親要素のcontainer基準ではなくbodyが基準になります。そして、baseの子要素であるbox1からbox5までが親要素に合わせてfixedになります。子要素のz-index指定はbaseの内側の関係では有効ですが、baseの外との関係では親と同じになるため、box6がbox4の上に表示されます。
ウインドウを縦スクロールした状態
baseのz-indexを4にすると、box6の上に表示されます。
HTML,CSSのソース
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>position</title>
<style>
html,body {
margin: 0;
}
body {
background: #555;
color: #FFF;
}
#container {
background: #AAA;
width: 500px;
height: 800px;
margin: 50px;
position: relative;/*positionの基点にする*/
}
.box {
width: 200px;
height: 200px;
}
.base {
background: #24B989;
position: fixed;/*fixedは親要素基準ではなくbody基準*/
top: 100px;
left: 100px;
}
.box1 {/*実行結果の番号1*/
background: #8BC10E;
position: absolute;/*base基準*/
top: 50px;
left: 65px;
z-index: 1;
}
.box2 {/*実行結果の番号2*/
background: #BEC819;/*base基準*/
position: absolute;
top: 100px;
left: 120px;
z-index: 2;
}
.box3 {/*実行結果の番号3*/
background: #B79317;/*base基準*/
position: static;
width: 75px;
height: 75px;
}
.box4 {/*実行結果の番号4*/
background: #98531D;/*base基準*/
position: absolute;
top: 150px;
left: 170px;
z-index: 4;
}
.box5 {/*実行結果の番号5*/
background: #AB391F;/*box3基準*/
position: static;
width: 75px;
height: 75px;
}
.box6 {/*実行結果の番号6*/
background: #CD171D;/*body基準*/
position: absolute;
top: 300px;
left: 150px;
z-index: 3;
}
</style>
</head>
<body>
body
<div id="container">
container
<div class="box base">base(fixed) body基準
<!--親要素がfixedならその子要素のbox1～box5もfixedになる-->
<!--子要素のz-index指定はbaseの内側の関係では有効だが、baseの外との関係では親と同じになるため、box6がbox4の上に表示される。-->
<div class="box box1">box1 base基準 z-index:1</div>
<div class="box box2">box2 base基準 z-index:2</div>
<div class="box box3">box3 base基準</div>
<div class="box box4">box4 base基準 z-index:4</div>
<div class="box box5">box5 base基準</div>
</div><!--/.box .base-->
</div><!--/#container-->
<div class="box box6">box6 body基準 z-index:3</div>
</body>
</html>
