z-index

box a
box b
box c
"> 08-03_z-index
z-index

box a
box b
box c
"> 08-03_z-index
z-index

box a
box b
box c
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08-03_z-index</title>
<!--
	# z-index
	- position 속성에서 요소들의 계층을 변경할 때 사용.
	  숫자가 클수록 위로 올라가고, 작을수록 아래로 내려감.
	  > -1 을 사용하면 가장 바닥으로 배치.
-->
<style type="text/css">
* { margin: 0; padding: 0; }

div {
	width: 200px;
	height: 200px;
	margin: 20px;
	position: absolute;
}

.base {
	border: 1px solid black;
}

.box_a {
	background-color: red;
	top: 50px;
	left: 100px;
	z-index: 4;
}

.box_b {
	background-color: green;
	top: 100px;
	left: 150px;
	z-index: 3;
}

.box_c {
	background-color: blue;
	top: 150px;
	left: 100px;
	z-index: 5;
}

</style>
</head>
<body>
	<h1>z-index</h1>
	<br>
	<div class="base">
		<div class="box_a">box a</div>
		<div class="box_b">box b</div>
		<div class="box_c">box c</div>
	</div>
	
</body>
</html>