CSS z-index 완전 정복: 개념부터 실전 활용까지

웹 개발에서 레이아웃을 구성할 때, 요소들이 겹치는 경우가 종종 발생합니다. 이때 특정 요소를 위로 올리거나 아래로 내리는 데 사용하는 속성이 바로 z-index 입니다. 하지만 초보자뿐만 아니라 숙련된 개발자들도 z-index가 예상대로 동작하지 않아 혼란을 겪는 경우가 많습니다. 본 글에서는 z-index의 개념, 작동 원리, 활용법, 그리고 실전에서 발생할 수 있는 문제와 해결 방법까지 깊이 있게 다루어 보겠습니다.

1. z-index란?

z-index는 CSS의 속성 중 하나로, HTML 요소의 쌓임 순서(stacking order) 를 결정하는 역할을 합니다. 기본적으로 HTML 요소들은 문서 흐름(Document Flow)에 따라 배치되지만, position 속성을 사용하여 요소를 상대적(relative), 절대적(absolute), 고정(fixed) 또는 스티키(sticky)로 변경하면 z-index를 이용해 요소의 순서를 조정할 수 있습니다.

2. z-index의 기본 원리

(1) 기본적인 동작 방식

• z-index는 숫자 값을 가지며, 값이 클수록 위에 배치됩니다.
• 기본적으로 요소들은 HTML 문서의 순서대로 쌓이며, z-index를 지정하지 않으면 기본값(0)이 적용됩니다.
• z-index는 position이 static이 아닌 경우에만 동작합니다. 즉, position: static; 상태에서는 z-index를 설정해도 효과가 없습니다.

(2) z-index 값의 유형

z-index 값은 정수값을 가지며, 양수, 0, 음수 모두 설정할 수 있습니다.

.element1 {
  position: relative;
  z-index: 1;
}

.element2 {
  position: relative;
  z-index: 10; /* element2가 element1보다 위에 배치됨 */
}

위 코드에서 .element2가 .element1보다 더 높은 z-index 값을 가지므로 화면에서 위쪽에 나타납니다.

3. 쌓임 맥락(Stacking Context)

z-index를 제대로 이해하려면 쌓임 맥락(Stacking Context) 개념을 숙지해야 합니다. 쌓임 맥락은 특정 요소가 독립된 z-index 환경을 형성하는 개념으로, 다음과 같은 경우 생성됩니다.

(1) 쌓임 맥락이 생성되는 조건

• position: absolute, position: relative, position: fixed, position: sticky와 함께 z-index 값이 설정된 경우
• display: flex 또는 display: grid가 적용된 부모 요소에 z-index를 지정한 경우
• opacity 값이 1보다 작은 경우 (예: opacity: 0.99;)
• transform, filter, perspective, clip-path 등의 속성이 적용된 경우

(2) 쌓임 맥락 예제

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 9999;
}

위와 같이 .child 요소에 높은 z-index 값을 부여해도 .parent 요소 내에서만 영향력을 가집니다. 즉, 쌓임 맥락이 형성되면 자식 요소의 z-index는 부모의 영향권을 벗어나지 못합니다.

4. z-index 활용 예제

(1) 여러 개의 요소가 겹칠 때

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2;
}

.box2 {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1;
}

위 코드에서는 .box1이 .box2보다 z-index 값이 크므로, .box1이 .box2 위에 표시됩니다.

(2) 모달 창을 최상단에 배치하기

모달 창은 사용자 인터페이스에서 매우 중요한 요소이며, 항상 페이지의 가장 위에 떠 있어야 합니다.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

이렇게 설정하면 z-index: 1000;을 통해 다른 요소들보다 위에 배치됩니다.

5. z-index가 동작하지 않을 때의 해결 방법

1. position 속성 확인: position: static; 상태에서는 z-index가 적용되지 않으므로 relative, absolute, fixed 중 하나로 변경해야 합니다.
2. 부모 요소의 z-index 확인: 부모 요소가 새로운 쌓임 맥락을 형성하는 경우, 자식 요소의 z-index가 기대한 대로 동작하지 않을 수 있습니다.
3. opacity, transform 등의 속성 확인: opacity: 0.9; 등의 속성이 적용되면 새로운 쌓임 맥락이 형성될 수 있습니다.
4. 개발자 도구(F12) 활용: 요소들의 쌓임 순서를 정확히 파악하려면 크롬 개발자 도구(F12)에서 z-index 값을 확인하는 것이 유용합니다.

6. 결론

z-index는 웹 개발에서 중요한 개념이지만, 쌓임 맥락(Stacking Context)과 연관되어 있어 쉽게 오해할 수 있는 속성입니다. 따라서, z-index를 올바르게 적용하려면 position 속성을 적절히 설정하고, 쌓임 맥락을 고려하며, 개발자 도구를 활용하여 디버깅하는 습관을 들이는 것이 중요합니다. 이를 잘 활용하면 복잡한 UI도 깔끔하게 구성할 수 있습니다.