● z-index 속성
z-index 속성을 사용하면 position 속성으로 배치한 요소의 z축 위치를 결정할 수 있습니다. 속성값으로는 하나의 정숫값이 옵니다.
형식
z-index:<정숫값>;
position 속성이 static 값이 아닐 때는 좌표 속성에 따라 요소를 배치할 수 있습니다. 그런데 이때 요소와 요소가 겹치는 문제가 발생할 수 있습니다. 예제로 살펴봅시다. 다음 예제에서는 빨간색 요소의 position 속성값을 relative로, 초록색 요소의 position 속성값을 absolute로 적용합니다.
06/05/z-index.html
<style>
.box{
width:100px;
height:100px;
}
.red-box{
background-color:red;
position:relative;
}
.green-box{
background-color:green;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div class="box red-box"></div>
<div class="box green-box"></div>
</body>
그림 6-54 실행결과