웹 페이지에서 요소들을 겹쳐서 배치해야 할 때가 있습니다. CSS의 z-index 속성을 사용하면 요소들이 화면에 표시되는 순서, 즉 쌓이는 순서(stacking order)를 자유롭게 조절할 수 있습니다.
z-index 속성이란?
z-index는 요소의 position 값이 relative, absolute, fixed 중 하나일 때만 작동합니다. 숫자가 클수록 앞쪽(위)에 배치되고, 작을수록 뒤쪽(아래)에 배치됩니다. 예를 들어 z-index: 3인 요소는 z-index: 1인 요소보다 항상 위에 표시됩니다.
예제 코드
아래 코드는 빨강, 노랑, 초록 세 개의 div 요소를 겹쳐서 배치하는 예제입니다. 각 요소에 서로 다른 z-index 값을 지정하여 레이어 순서를 제어합니다.
<html>
<head>
</head>
<body>
<div style = "background-color:red; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2">
</div>
<div style = "background-color:yellow; width:300px; height:100px; position:relative; top:-60px; left:35px; z-index:1;">
</div>
<div style = "background-color:green; width:300px; height:100px; position:relative; top:-220px; left:120px; z-index:3;">
</div>
</body>
</html>
코드 설명
- 빨간 div — z-index: 2로 설정되어 노란 div 위에 표시됩니다.
- 노란 div — z-index: 1로 세 요소 중 가장 낮은 값을 가지므로 맨 아래 레이어에 위치합니다.
- 초록 div — z-index: 3으로 가장 높은 값을 가지며, 모든 요소 위에 표시됩니다.
top과 left 속성을 활용해 각 요소를 의도적으로 겹치도록 배치했습니다. 이처럼 position과 z-index를 함께 사용하면 이미지 위에 텍스트를 올리거나, 모달 창을 만들거나, 드롭다운 메뉴를 구현하는 등 다양한 레이아웃을 손쉽게 구성할 수 있습니다.