<Position: absolute> - 기준이 되는 고정위치 지정
<Position: relative> - wrap으로 감싸서 원하는 부분에서만 보여주기
<!DOCTYPE html>
<html>
<head>
<title>Position 속성</title>
<style>
.box{
width:100px;
height:100px;
border: 1px solid #000000;
position: absolute; /*blue 하나로 겹쳐짐*/
}
#apple{
background-color: hotpink;
top: 50px; /*absolute에서 50px 떨어지게*/
left: 50px;
z-index:10000000;
}
#banana{
background-color: greenyellow;
top: 100px;
left: 100px;
z-index:100;
}
#car{
background-color:blue;
top:150px;
left: 150px;
z-index:1;
}
#wrap{
border: 2px solid #666666;
width: 400px;
height: 200px;
position: relative;
overflow: auto;
}
#apple:active{
bottom: 80px;
left: 80px;
}
#banana:active{
right:0px;
top: 50px;
}
#car:active{
right: 50px;
top: 80px;
}
</style>
</head>
<body>
<h1>Hey Baby</h1>
<div id="wrap">
<div id="apple" class="box"></div>
<div id="banana" class="box"></div>
<div id="car" class="box"></div>
</div>
<h1>It's me</h1>
</body>
</html>
댓글 없음:
댓글 쓰기