z-index가 같아도 겹치는 순서가 달라지는 이유

웹 개발을 하다 보면 z-index를 설정했음에도 겹치는 요소의 순서가 예상과 다르게 나타나는 경우가 있다. 이런 현상의 핵심 원인은 CSS의 stacking context에 있다.

 

1. 부모 요소의 stacking context

z-index는 같은 stacking context 내에서만 비교된다.

부모 요소에 position: relative|absolute|fixed|sticky 와 z-index가 설정되어 있으면 그 부모 안에서만 자식들의 z-index가 적용된다. 즉, 자식 요소들의 z-index가 같더라도 부모 stacking context가 다르면 부모 요소의 순서에 따라 겹침 순서가 달라질 수 있다. 부모의 z-index 가 더 높으면, 자식들의 z-index 도 같이 높아진다고 이해하면 된다.

.parent1 { position: relative; z-index: 1; }
.child1  { position: absolute; z-index: 5; }

.parent2 { position: relative; z-index: 2; }
.child2  { position: absolute; z-index: 5; }

이 경우 .child2가 .child1 위에 표시된다. 그 이유는 .child2의 부모 .parent2가 .parent1보다 높은 z-index stacking context를 가지기 때문이다.

 

2. DOM 순서

stacking context가 같고 z-index도 동일하면 HTML 문서에서 뒤에 나오는 요소가 위에 표시된다. 따라서 같은 z-index라도 DOM 순서를 확인해야 한다.

 

3. transform, opacity, filter 등으로 생성된 stacking context

transform, opacity < 1, filter, perspective, isolation 등의 CSS 속성은 새로운 stacking context를 만든다. 이렇게 생성된 stacking context 내에서만 z-index가 적용되므로 예상과 다른 겹침 현상이 발생할 수 있다.

.div1 { position: relative; z-index: 10; transform: translateZ(0); }
.div2 { position: relative; z-index: 10; }

.div1에 transform이 적용되어 새로운 stacking context가 생성되면 .div2 위에 표시되지 않을 수 있다.

 

4. 핵심 정리

1. z-index는 같은 stacking context 내에서만 비교된다.
2. stacking context가 같고 z-index도 같으면 DOM 순서가 겹침 순서를 결정한다.
3. transform, opacity, filter, isolation 등은 새로운 stacking context를 만들어 z-index 비교 범위를 제한한다.