<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>위치속성</title>
<style>
.wrap {
position:relative;
width:450px; height:150px; padding:50px;
border:5px solid #06F; overflow:hidden;
}
.red {
position:absolute;
width:300px; height:300px;
background:red; z-index:99;
}
.green {
position:absolute; left:100px; top:100px;
width:300px; height:300px;
background:green; z-index:9; /*9/99/999*/
}
.blue {
position:absolute; left:200px; top:200px;
width:300px; height:300px;
background:blue;
}
header {
position:fixed; left:0; top:0;
width:100%; height:70px;
background:#000; z-index:999;
}
h2.first { padding-top:150px;}
</style>
</head>
<body>
<header></header>
<h2 class="first">Lorem ipsum dolor sit amet</h2>
<div class="wrap">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<h2>Lorem ipsum dolor sit amet</h2>
</body>
</html>
결과
