<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*
z-index
1. z방향(앞뒤)의 순서를 결정하는 인덱스 값
2. 정수 값을 가짐
3. 값이 클수록 앞으로 나옴
4. 언제나 앞에 있어야 하는 메뉴는 z-index:9999; 같은 방식으로 처리
*/
/*
1. 각 박스의 크기 300 x 300
2. 박스 간의 거리 50px씩 차이
*/
.box{
width: 300px;
height: 300px;
position: absolute;
}
#red{
background-color: red;
top: 50px;
left : 50px;
z-index: 3;
}
#orange{
background-color: orange;
top: 100px;
left : 100px;
z-index: 2;
}
#yellow{
background-color: yellow;
top: 150px;
left : 150px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box" id="red">빨강 박스</div>
<div class="box" id="orange">주황 박스</div>
<div class="box" id="yellow">노랑 박스</div>
</body>
</html>
