z-index 속성

개요

position 속성을 absolute 등으로 변경하면 태그들이 겹치게 될 수 있다.

일반적으로 더 나중에 선언한 태그가 위에 배치되나,

style 속성z-index 를 이용하면 더 위에 배치시키거나 더 아래에 배치시킬 수 있다.

z-index 값이 높을수록 위, 작을수록 아래에 배치되며 정수 혹은 자연수 값을 사용한다.

사용법

#box {z-index:33}

예제

<html>
<head>
<style>
	.box{ width:150px; height:50px; position:absolute; }
	#box1{ z-index:30; background-color:cyan; left:0px; top:0px; }
	#box2{ z-index:70; background-color:blue; left:50px; top:30px; }
	#box3{ z-index:10; background-color:magenta; left:100px; top:60px; }
</style>
</head>

<body>
	<div id="box1" class="box"></div>
	<div id="box2" class="box"></div>
	<div id="box3" class="box"></div>
</body>
</html>
출력 결과: