HTML, CSS

z-index 완전 이해하기 – 겹치는 요소의 순서를 제어하는 방법

jonbeo 2025. 6. 24. 10:45
반응형

 

 

웹사이트를 제작하다 보면, 박스나 요소들이 서로 겹치는 상황을 종종 만나게 됩니다.
이럴 때 어떤 요소를 위에 보이게 할지 결정해주는 속성이 바로 z-index입니다.

이번 포스팅에서는 z-index의 기본 개념부터 적용 조건, 실무에서 자주 겪는 문제까지 하나씩 차근차근 정리해보겠습니다.

 

✅ z-index란 무엇인가요?

z-index는 겹쳐지는 요소들 사이의 순서를 지정하는 CSS 속성입니다.
숫자가 높을수록 위쪽에 쌓여 사용자에게 먼저 보이게 됩니다.

.box1 {
  position: absolute;
  z-index: 1;
}

.box2 {
  position: absolute;
  z-index: 10;
}

 

위 코드에서는 .box2가 .box1보다 위에 표시됩니다.

 

✅ z-index가 동작하려면?

z-index는 단독으로는 작동하지 않으며, 반드시 position 속성과 함께 사용해야 합니다.
기본적으로 position이 static일 경우에는 z-index가 무시됩니다.

/* 작동하지 않음 */
.box {
  z-index: 10;
}

/* 작동함 */
.box {
  position: relative;
  z-index: 10;
}

 

z-index가 적용되기 위해서는 아래 중 하나의 position 속성이 필수입니다.

  • relative
  • absolute
  • fixed
  • sticky

 

✅ 숫자가 클수록 앞에 보입니다

z-index는 숫자가 클수록 요소가 더 위에 쌓이게 됩니다.
음수 값도 가능하며, 이 경우 다른 요소들보다 아래에 위치하게 됩니다.

 

z-index 값 의미
auto 기본값으로 부모 요소 기준으로 정렬됩니다
0, 1, 10 등 숫자가 클수록 위에 보입니다
음수 다른 요소보다 더 아래에 배치됩니다 
.box1 { z-index: 1; }
.box2 { z-index: 2; } /* .box2가 더 위에 표시됩니다 */

 

 

✅ 스택 컨텍스트(Stack Context)를 이해해야 합니다

z-index는 무조건 전체 요소 기준으로 비교되지 않습니다.
스택 컨텍스트라는 개념 안에서 서로의 z-index 값이 비교됩니다.

예를 들어, 부모 요소에 z-index가 설정되어 있을 경우
그 자식 요소들은 같은 스택 컨텍스트 내에서만 순서가 비교되며,
다른 부모 요소의 자식과는 순서가 독립적으로 적용됩니다.

.parent {
  position: relative;
  z-index: 5;
}
.child {
  position: absolute;
  z-index: 999; /* 부모의 컨텍스트를 넘지 못합니다 */
}

 

 

⚠️ 실무에서 자주 겪는 z-index 문제들

  • z-index를 줬는데도 요소가 보이지 않는 경우
    → position 속성이 빠졌거나, 부모의 컨텍스트에 갇힌 상황일 수 있습니다.
  • 모달 창이 가려지는 문제
    → 모달보다 상위 부모 요소에 낮은 z-index가 적용되어 있으면 가려질 수 있습니다.
  • 모바일에서 헤더가 뒤로 가는 현상
    → 브라우저 기본 스타일 또는 fixed 위치 속성과 충돌할 수 있습니다.
    position과 z-index 조합을 다시 확인해야 합니다.

 

✅ 정리 포인트

 

개념 설명
z-index 작동 조건 반드시 position 속성이 설정되어야 합니다
숫자가 클수록 요소가 더 위에 표시됩니다
스택 컨텍스트 부모 요소 간에는 z-index 비교가 독립적으로 이루어집니다
실전 팁 모달, 드롭다운, 고정 헤더 등의 UI 요소에 필수적으로 활용됩니다

 

반응형