코드를 실행하면 초록색 요소가 빨간색 요소보다 위에 표시됩니다. position 속성은 다른 요소들이 배치되면 나중에 작성된 요소가 앞에 표시되어서 그렇습니다. 이때 요소들의 앞뒤 배치를 바꾸고 싶다면 z축 값을 지정하는 z-index 속성을 사용합니다. 속성값의 숫자가 클수록 요소가 더 앞쪽에 배치됩니다. 모든 요소는 기본으로 z-index 속성값이 0이므로 0보다 크게 설정하면 됩니다.
06/05/z-index.html
.red-box{
background-color:red;
position:relative;
z-index:10;
}
그림 6-55 실행결과
z축의 값이 더 높은 빨간색 요소가 앞에 표시됩니다.
수코딩의 조언
요소를 원하는 위치에 배치하고 싶을 때 position 속성은 아주 효과적입니다. 그래서 초보자가 코드를 작성할 때 화면의 모든 구성 요소를 position 속성으로 배치하는 경우가 종종 있습니다. 하지만 이는 잘못된 코딩 습관입니다. 모든 요소는 최대한 기본 흐름을 유지하면서 정말 필요한 대상에만 position 속성을 사용해야 합니다.