CSS로 레이아웃을 설계하다 보면 요소를 위아래 또는 좌우로 배치하는 경우가 대부분입니다. 하지만 z-index 속성을 활용하면 Z축이라는 세 번째 차원으로 요소를 이동시켜, 서로 겹쳐 쌓이는 스택(stack) 효과를 만들 수 있습니다.
z-index 속성은 auto 키워드 또는 정수 값을 받습니다. 아래 선언은 모두 유효합니다:
z-index: auto;
z-index: -1;
z-index: 9999;
참고: z-index가 실제로 적용되려면 해당 요소에 position 속성으로 relative, absolute, fixed 중 하나의 위치 지정이 반드시 선행되어야 합니다. position 값이 없다면 z-index: auto를 적용한 것과 마찬가지로 아무 변화가 없으며, 쌓임 맥락(stacking context)도 생성되지 않습니다.
이제 실제 예제를 통해 살펴보겠습니다.
기니피그를 배치해 보자
Codepen에서 이 예제를 직접 열어 볼 수 있으니, 필자와 함께 코드를 수정하며 따라와 보세요!
두 마리의 기니피그, 애칭으로 '쿠이(Cuy)'라고 부르겠습니다. 훨씬 귀엽게 들리니까요! 한낮의 기온이 32도를 넘는 무더운 여름날을 상상해 봅시다. 첫 번째 쿠이는 호수 안에서 시원하게 물놀이를 즐기고 있습니다. 두 번째 쿠이는 너무 게을러서 커피로 깨워줘야 하는데요, 두 번째 쿠이 위에 커피를 쌓아 올려 마시게 해주겠습니다.
포지셔닝 없이 CSS를 전혀 적용하지 않으면 이미지는 대략 아래와 같이 보입니다.
목표는 z-index로 쌓임 맥락을 만들어, 일부 이미지를 호수와 커피 이미지 위에 배치하는 것입니다.
앞서 언급했듯이 z-index가 적용되려면 요소에 위치 지정을 추가해야 합니다. 먼저 첫 번째 쿠이의 위치를 지정해 보겠습니다:
img.cuy.one {
position: absolute;
}어라, 우리 친구가 사라졌네요? 호수 위로 나타나도록 더 높은 쌓임 순서(z-index)를 부여해 주겠습니다:
img.cuy.one {
position: absolute;
z-index: 1;
}짜잔! 이제 쿠이가 호수 위에 나타났습니다. 여기에 padding을 추가해 호수 안쪽에 자연스럽게 들어가도록 조정할 수 있는데, 그 부분은 여러분이 직접 실험해 보시기 바랍니다.
이제 z-index로 쌓임 맥락을 만드는 방법을 익혔으니, 두 번째 동물도 아주 간단히 배치할 수 있습니다:
img.cuy.two {
position: absolute;
width: 160px;
padding: 100px;
z-index: 1;
}여기서 padding은 이미지의 정확한 위치 조정을 위한 것이고, width는 작은 친구의 크기를 지정하기 위한 값입니다. 이것으로 작업이 완료되었고, 모두가 행복하고 상쾌한 기분이 되었습니다:
마무리
z-index를 자유롭게 다루면 훨씬 흥미로운 레이아웃 아이디어를 구현할 수 있습니다. 소개한 Codepen에는 화면 최상단에 z-index로 배치된 팝업 채팅 UI 디자인의 두 번째 예제도 함께 담아 두었으니 꼭 확인해 보세요!
절대 잊지 마세요 — z-index가 작동하려면 요소에 반드시 position 속성을 지정해야 합니다. Codepen에서 position 값을 삭제한 뒤 어떻게 달라지는지 직접 눈으로 확인해 보면 이해가 훨씬 빠를 것입니다.
마지막으로 한 가지 중요한 팁을 덧붙입니다. z-index는 기본적으로 형제(sibling) 요소 간에 적용됩니다. 본문의 예제에서 이미지들은 서로 중첩되지 않고 나란히 놓인 형제 관계였습니다. 요소가 깊이 중첩(nested)되어 있다면 z-index가 의도대로 작동하지 않을 수 있습니다. 실무에서 레이아웃을 다룰 때 이 점을 항상 염두에 두시기 바랍니다.