ポジションレイアウト absolute
positionを使って表示位置を指定
表示位置の指定方法の種類
- static ポジションレイアウトを行わない
- relative 通常の表示位置を基点にした位置指定
- absolute 親要素を基点にした位置指定
- fixed ブラウザ画面を基点にした位置指定
- page ページボックスやリージョンボックスを基点にした位置指定
absoluteは親要素を基点にした位置指定
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: 400px;
height: 400px;
margin: 50px;
position: relative;/*positionの基点にする*/
}
.box {
width: 150px;
height: 150px;
}
.base {
background: #24B989;
position: absolute;/*container基準*/
top: 50px;
left: 50px;
}
.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 container基準
<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>
