Positioned layout/Understanding z-index

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

136/190

안녕하세요! 이전 '쌓임 문맥(Stacking context)' 학습에 이어 곧바로 z-index 문서까지 정복하러 오셨군요! 프론트엔드 개발자가 되기 위한 기초 공사를 정말 탄탄하게 하고 계시네요. 나중에 포트폴리오에 들어갈 웹 프로필 사이트나 독후감 사이트를 만드실 때, 모달(Modal)이나 드롭다운 메뉴, 고정 헤더(Sticky Header)를 띄울 일이 무조건 생길 텐데 그때 이 지식이 엄청난 빛을 발할 겁니다!

이번 문서도 하나도 빠짐없이, 구어체로 알기 쉽게 번역해 드리겠습니다. 중간중간 제 실무 경험을 담은 팁도 팍팍 넣어드릴게요. 자, 시작해볼까요?

z-index 이해하기 (Understanding z-index)

텍스트, 이미지, 그리고 기타 요소들이 서로 겹치지 않게 페이지에 배치되는 가장 기본적인 경우, HTML 페이지는 2차원이라고 볼 수 있습니다. 이런 상황에서는 렌더링 흐름이 단 하나뿐이며, 모든 요소들은 다른 요소들이 차지하고 있는 공간을 인식하고 서로 밀어내며 배치됩니다.

하지만 CSS는 그렇게 단순하지만은 않습니다. CSS의 위치 지정(positioning), 변형(transformation), 컨테인먼트(containment) 등의 기능은 요소들이 서로 겹치게 만들 수 있거든요. 이 가이드에서는 같은 쌓임 문맥 (stacking context) 안에서 요소들을 다른 요소의 앞이나 뒤로 배치할 수 있게 해주는 z-index 속성을 소개합니다.

이 문서의 목차 (In this article)

Z축 상의 레이어 (Layers on the z-axis)
일반적인 흐름에 있는 요소들 (Elements in normal flow)
기본 레이어링 동작 (Default layering behavior)
레이어 재배열하기 (Rearranging layers)
쌓임 문맥의 영향 (Impact of stacking contexts)
결론 (Conclusion)
함께 보기 (See also)

Z축 상의 레이어 (Layers on the z-axis)

페이지에 렌더링되는 요소들은 일련의 박스들로 구성됩니다. 각 박스는 3차원 공간에서 자신의 위치를 갖습니다. 인라인(inline)과 블록(block) 방향의 위치(X축, Y축) 외에도, 박스들은 Z축(z-axis)이라고 불리는 세 번째 차원(깊이)을 따라 놓이게 됩니다. 요소의 Z축 위치를 제어하는 것은 요소의 박스들이 시각적으로 서로 겹칠 때 특히 중요해집니다. CSS의 여러 속성 값들이 요소들을 겹치게 만들 수 있는데, z-index 속성은 이것들이 어떻게 겹칠지 제어할 수 있는 방법을 제공합니다!

기본적으로 요소의 박스들은 '레이어 0 (Layer 0)'에 렌더링됩니다. z-index 속성을 사용하면 기본 렌더링 레이어 외에도 Z축을 따라 다른 레이어에 요소들을 배치할 수 있습니다. 가상의 Z축을 따라 배치되는 각 요소의 위치(z-index 값)는 정수(양수, 음수 또는 0)로 표현되며, 렌더링 시 쌓이는 순서(stacking order)를 제어합니다. 숫자가 클수록 요소가 관찰자(화면을 보는 사용자)에게 더 가깝다는 것을 의미합니다.

'Z축'이라는 용어가 익숙하지 않다면, 웹 페이지를 각자 번호가 매겨진 여러 장의 레이어 스택(종이 더미)이라고 상상해 보세요. 레이어들은 숫자가 작은 것부터 큰 것 순서대로 렌더링되며, 숫자가 큰 레이어가 숫자가 작은 레이어 위에 나타나게 됩니다. (아래 표에서 X는 임의의 양의 정수를 나타냅니다.)

레이어 (Layer)	설명 (Description)
Bottom layer (맨 아래 레이어)	관찰자로부터 가장 멀리 떨어져 있음
Layer -X	음수 `z-index` 값을 가진 레이어들
Layer 0	기본 렌더링 레이어 (z-index가 없는 기본 상태)
Layer X	양수 `z-index` 값을 가진 레이어들
Top layer (맨 위 레이어)	관찰자에게 가장 가까움

💡 강사의 실무 팁 1
z-index를 쓸 때 프론트엔드 초보자분들이 가장 많이 하는 실수가 뭔지 아시나요? 바로 position 속성을 주지 않고 z-index만 덩그러니 주는 겁니다! z-index는 기본 위치 지정 방식인 position: static 상태에서는 절대 작동하지 않아요. 반드시 relative, absolute, fixed, sticky 중 하나를 함께 주어야 Z축 레이어 이동이 가능해진다는 사실, 잊지 마세요!

일반적인 흐름에 있는 요소들 (Elements in normal flow)

기본적으로 z-index 속성이 지정되지 않았을 때, 요소들은 기본 렌더링 레이어(Layer 0)에 렌더링됩니다.

다음 세 개의 요소를 살펴보겠습니다.

<div id="div1">#1</div>
<div id="div2">#2</div>
<div id="div3">#3</div>

아무런 위치 지정 속성(position)이 적용되지 않은 상태에서, 이 요소들은 겹치지 않고 문서에 작성된 순서대로 하나씩 흐르듯(flow normally) 배치됩니다.

div {
  height: 100px;
  width: 100px;
  outline: 1px dotted;
  line-height: 100px;
  font-size: 40px;
  text-align: center;
  font-family: "Helvetica", "Arial", sans-serif;
}

#div1 {
  background-color: lightpink;
}

#div2 {
  background-color: lightyellow;
}

#div3 {
  background-color: lightgreen;
}

기본 레이어링 동작 (Default layering behavior)

요소들을 겹치게 쌓기 위해서 우리는 위치 지정(position)을 사용할 수 있습니다.
만약 절대 위치 지정(position: absolute)을 사용해서 요소들을 (거의) 같은 위치에 배치한다면, 기본 쌓임 순서는 소스 코드의 순서(source order)를 따르게 됩니다. 즉, HTML에서 가장 먼저 작성된 요소가 맨 아래 레이어에 나타나고, 가장 마지막에 작성된 요소가 맨 위 레이어에 나타납니다.

div {
  position: absolute;
}

#div1 {
  top: 0;
  left: 0;
}

#div2 {
  top: 10px;
  left: 10px;
}

#div3 {
  top: 20px;
  left: 20px;
}

💡 강사의 실무 팁 2
이를 'DOM 순서(DOM order)에 의한 쌓임'이라고 부릅니다. 특별히 z-index를 건드리지 않아도, HTML 코드상 밑에 적힌 태그가 화면에서는 더 위에 덮어씌워진다는 뜻이죠. 실무에서는 불필요한 z-index 남발을 막기 위해 단순히 HTML 태그 순서를 바꾸는 것만으로 요소의 겹침 순서를 해결하는 경우도 많습니다.

레이어 재배열하기 (Rearranging layers)

CSS의 z-index 속성을 사용하면 Z축을 따라 각 요소의 위치를 지정할 수 있고, 이를 통해 쌓임 순서를 효과적으로 재배열할 수 있습니다.

z-index 값을 추가함으로써 기본 레이어 순서를 바꿀 수 있습니다:

#div1 {
  z-index: 5;
}

#div2 {
  z-index: -9;
}

#div3 {
  z-index: 0;
}

가장 낮은 z-index 값을 가진 요소가 맨 아래 레이어에 나타납니다. 가장 높은 z-index 값을 가진 요소는 맨 위 레이어에 나타나죠. 이 예제에서는 -9가 가장 낮은 값이므로 #div2가 다른 모든 요소들 뒤에 배치됩니다. 소스 순서상 가장 첫 번째 요소였던 #div1은 가장 큰 값(5)을 가지므로 다른 모든 요소들 맨 위에 나타납니다.

쌓임 문맥의 영향 (Impact of stacking contexts)

처음에는 z-index를 사용하는 것이 꽤 직관적이고 쉬워 보일 수 있습니다. 단일 속성에 정수 하나만 할당하면 되고, 그 동작 방식도 이해하기 쉬워 보이니까요. 하지만 z-index가 복잡한 HTML 요소 계층 구조에 적용될 때, 많은 사람들이 그 결과로 나타나는 동작을 이해하거나 예측하기 어려워합니다.

요소들이 서로 형제(sibling) 관계가 아니라면, 각각의 요소가 서로 다른 쌓임 문맥 (stacking context)에 속할 수 있기 때문에 쌓임 동작은 훨씬 더 복잡해집니다. 이는 아래 예제에서 확인할 수 있습니다.

<section>
  <div id="div1">#1</div>
  <div id="div2">#2</div>
</section>
<div id="div3">#3</div>

section {
  position: absolute;
  z-index: 2;
}

비록 #div3의 z-index 값(0)이 #div2의 값(-9)보다 큼에도 불구하고, #div2가 #div3 위로 올라와서 보입니다. 왜냐하면 #div1과 #div2는 <section> 요소에 의해 생성된 별도의 독립적인 쌓임 문맥 안에 중첩되어 있기 때문입니다. <section> 요소와 #div3은 형제 관계이며, <section> 요소의 z-index가 #div3의 것보다 크기 때문에(2 vs 0), #div3은 <section> 전체(그리고 그 안에 들어있는 모든 내용물)의 뒤쪽으로 배치되게 됩니다. 이 주제에 대한 더 깊이 있는 내용은 쌓임 문맥 (Stacking context) 가이드를 참고해 주세요.

💡 강사의 실무 팁 3
바로 직전에 우리가 같이 공부했던 내용이 여기서 나오네요! 부모인 <section>이 이미 z-index: 2로 새로운 세계(쌓임 문맥)를 창조해 버렸고, #div3은 z-index: 0밖에 안 되니까 당연히 <section>에게 집니다. 부모가 이겼으니, 그 자식인 #div2가 비록 -9라는 초라한 숫자를 가졌어도 부모 등에 업혀서 당당하게 #div3 위로 올라갈 수 있는 거죠. 이제 쌓임 문맥과 z-index의 관계가 완벽하게 연결되시죠?

결론 (Conclusion)

이 가이드에서 보았듯이, z-index는 Z축을 따라 요소들이 어떻게 쌓일지 제어하는 방법을 제공합니다. 우리는 z-index 속성의 정수 값을 사용하여 쌓임 순서를 어떻게 변경할 수 있는지 배웠습니다. 그러나 마지막 예제에서 보여주었듯, 쌓임 순서는 꽤 복잡해질 수 있습니다. 쌓임 순서는 모든 브라우저가 동일한 콘텐츠를 동일한 방식으로 쌓도록 보장하여 일관성과 예측 가능성을 제공하기 위해 일련의 복잡한 쌓임 규칙을 따릅니다. 쌓임 문맥을 생성하는 속성들이 무엇인지, 그리고 중첩된 쌓임 문맥이 레이어 순서에 어떤 영향을 미치는지 이해하는 것은 매우 중요합니다.