[CSS] Z-INDEX의 개념 정리

HTML 문서에서 요소를 겹쳐 배치하면,
나중에 작성된 요소일수록 화면에서 앞쪽에 배치된다.

 

1. 기본 규칙: DOM 순서 = 쌓임 순서

<div class="box red"></div>
<div class="box blue"></div>

 

• blue가 red보다 아래에 작성
• 별도 설정이 없다면 blue가 red 위에 보인다

즉,

HTML에서 밑에 있는 요소일수록
화면에서는 앞으로 배치된다

 

2. z-index로 앞뒤 배치를 바꿀 수 있다

이 기본 쌓임 순서는
z-index를 사용하면 의도적으로 변경할 수 있다.

.red {
  position: relative;
  z-index: 2;
}

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

 

• DOM 순서와 상관없이
• z-index 값이 큰 요소가 앞으로 나온다

숫자가 클수록 **위(앞)**에 쌓인다.

 

3. z-index가 동작하기 위한 조건

중요한 전제 조건이 있다.

z-index는
position이 static이 아닐 때만 동작한다

즉, 아래 중 하나가 필요하다.

• position: relative
• position: absolute
• position: fixed
• position: sticky

 

4. 언제 이 개념이 중요할까?

• 모달이 배경 뒤로 숨어버릴 때
• fixed 헤더가 콘텐츠에 가려질 때
• sticky 요소가 다른 요소에 덮일 때

대부분 z-index + position 조합 문제다.

 

 

5. 정리하면

• 기본적으로 밑에 작성된 요소가 앞으로 보인다
• z-index를 사용하면 앞뒤 배치 제어 가능
• 단, position이 설정되어 있어야 한다