Positioned layout/Using z-index

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

137/190

안녕하세요! 프론트엔드 강사입니다.

오늘은 CSS로 레이아웃을 잡을 때 빠질 수 없는 단골 손님, 바로 z-index에 대해 MDN 공식 문서를 통해 배워보겠습니다. 팝업창을 띄우거나 내비게이션 바를 화면 맨 위에 고정할 때 "어? 왜 내 요소가 다른 박스 밑으로 숨어버리지?" 하고 당황하셨던 경험, 다들 한 번쯤 있으실 텐데요. 오늘 이 문서를 통해 그 궁금증을 완벽하게 해결해 드릴게요! 제가 실무에서 겪었던 꿀팁들도 중간중간 팍팍 넣어드릴 테니 잘 따라와 주세요!

z-index 사용하기 (Using z-index)

이 가이드의 첫 번째 문서인 z-index 속성 없이 쌓기 (Stacking without the z-index property)에서는 기본적으로 요소들이 어떻게 쌓이는지 설명했습니다. 만약 이 기본 쌓임 순서를 내 마음대로(custom) 바꾸고 싶다면, 위치가 지정된(positioned) 요소에 z-index 속성을 사용하면 됩니다.

z-index 속성은 정수 값(양수, 0, 또는 음수)으로 지정할 수 있으며, 이 값은 가상의 Z축(z-axis)을 따라 요소가 위치할 곳을 나타냅니다. 'Z축'이라는 용어가 익숙하지 않다면, 웹 페이지를 여러 장의 투명한 필름(레이어)이 번호표를 달고 겹쳐져 있는 스택이라고 상상해 보세요. 레이어는 숫자가 작은 것부터 큰 순서대로 렌더링되며, 숫자가 큰 레이어가 숫자가 작은 레이어 위로 덮이게 됩니다 (아래 표에서 X는 임의의 양의 정수를 나타냅니다):

레이어 (Layer)	설명 (Description)
가장 아래 레이어 (Bottom layer)	관찰자(사용자)로부터 가장 멀리 떨어져 있습니다.
레이어 -X (Layer -X)	음수 `z-index` 값을 가진 레이어들입니다.
레이어 0 (Layer 0)	기본 렌더링 레이어입니다.
레이어 X (Layer X)	양수 `z-index` 값을 가진 레이어들입니다.
가장 위 레이어 (Top layer)	관찰자(사용자)와 가장 가깝습니다. 화면의 제일 앞쪽으로 튀어나옵니다.

👨‍🏫 강사님의 꿀팁 & 보충설명:
여기서 정말, 정말 중요한 포인트가 하나 있습니다! 첫 문단에서 "위치가 지정된(positioned) 요소에 사용하면 됩니다"라고 했죠? 초보자분들이 가장 많이 하는 실수가 바로 position 속성을 주지 않은 일반 요소(기본값인 position: static)에 z-index: 9999;를 주고 "왜 안 위로 안 올라오지?" 하고 고민하는 것입니다.
z-index는 반드시 position 속성이 relative, absolute, fixed, sticky 중 하나이거나, Flexbox나 Grid의 자식 아이템일 때만 동작한다는 사실! 실무에서 무조건 외워두셔야 합니다!

참고 (Note):

z-index 속성이 지정되지 않으면, 요소들은 기본 렌더링 레이어(레이어 0)에 그려집니다.
만약 여러 요소가 똑같은 z-index 값을 공유한다면 (즉, 같은 레이어 층에 배치된다면), z-index 속성 없이 쌓기 섹션에서 설명했던 기본 쌓임 규칙(HTML 문서에 나중에 작성된 요소가 위로 올라옴)이 그대로 적용됩니다.

예제 (Example)

이 예제에서는 z-index를 사용해서 레이어들이 쌓이는 순서를 재배치해 보았습니다. 여기서 DIV #5의 z-index는 아무런 효과가 없는데요, 그 이유는 위치가 지정된(positioned) 요소가 아니기 때문입니다.

👨‍🏫 강사님의 꿀팁 & 보충설명:
아래 코드를 보면 DIV #5(id="sta1")에 z-index: 8이라는 가장 높은 숫자를 주었지만, position 속성이 없기 때문에 무시당하고 맨 아래에 깔리게 됩니다. 이렇게 의도적으로 작동하지 않는 예시를 섞어둔 것이니 꼭 확인해 보세요!

HTML

<div id="abs1">
  <strong>DIV #1</strong>
  <br />position: absolute; <br />z-index: 5;
</div>

<div id="rel1">
  <strong>DIV #2</strong>
  <br />position: relative; <br />z-index: 3;
</div>

<div id="rel2">
  <strong>DIV #3</strong>
  <br />position: relative; <br />z-index: 2;
</div>

<div id="abs2">
  <strong>DIV #4</strong>
  <br />position: absolute; <br />z-index: 1;
</div>

<div id="sta1">
  <strong>DIV #5</strong>
  <br />no positioning <br />z-index: 8;
</div>

CSS

div {
  padding: 10px;
  opacity: 0.7;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
}

#rel1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px;
}

#rel2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px;
}

#abs2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
}

#sta1 {
  z-index: 8;
  height: 70px;
  border: 1px dashed #999966;
  background-color: #ffffcc;
  margin: 0px 50px;
}

결과 (Result)

아래 링크를 클릭하여 MDN Playground에서 코드가 실제로 어떻게 쌓이는지 결과를 확인해 보세요! DIV #1(z-index: 5)이 가장 위에 올라와 있고, z-index: 8을 준 DIV #5가 맨 바닥에 깔려있는 재미있는 결과를 확인하실 수 있습니다.