chapter22 : z-index

WEB.CSS
chapter22 : z-index

GAWON 2023. 5. 18. 10:22
<!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>