CSS의 z-index 속성은 position 속성과 함께 사용하여 요소에 레이어(층위) 효과를 만들 때 사용됩니다. 여러 요소가 겹쳐 있을 때 어떤 요소를 맨 위로 올리고, 어떤 요소를 아래로 내릴지 순서를 지정할 수 있습니다.
z-index의 기본 원리
z-index 값이 클수록 해당 요소는 화면에서 더 앞쪽(위쪽)에 배치됩니다. 반대로 값이 작으면 다른 요소 뒤로 숨겨집니다. 참고로 z-index는 position 속성값이 relative, absolute, fixed, sticky 중 하나일 때만 동작한다는 점을 기억해야 합니다.
예제 코드
아래 예제를 실행하면 세 개의 div 박스가 서로 겹치면서 z-index 값에 따라 쌓이는 순서가 달라지는 것을 확인할 수 있습니다.
<html> <head> </head> <body> <div style = "background-color:blue; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2"> </div> <div style = "background-color:gray; width:300px; height:100px; position:relative; top:-60px; left:35px; z-index:1;"> </div> <div style = "background-color:yellow; width:300px; height:100px; position:relative; top:-220px; left:120px; z-index:3;"> </div> </body> </html>
실행 결과 해석
위 코드에서 노란색 박스(z-index: 3)가 가장 위에, 파란색 박스(z-index: 2)가 그 아래, 회색 박스(z-index: 1)가 가장 아래에 배치됩니다. 이처럼 z-index 값을 조절하면 모달 창, 드롭다운 메뉴, 툴팁 등 겹치는 UI 요소의 표시 순서를 자유롭게 제어할 수 있습니다.