[CSS] z-index가 안 먹히는 이유와 Stacking Context

이번 포스팅에서는 [CSS 레이아웃 심화] 파트의 세부 주제인 z-index의 숨겨진 규칙에 대하여 상세히 알아보겠습니다.

1. z-index의 첫 번째 조건: Position

가장 흔한 실수입니다. z-index 속성은 반드시 요소의 position이 static(기본값)이 아닌 경우(relative, absolute, fixed, sticky)에만 동작합니다.

2. 9999를 줘도 안 올라가는 이유: 쌓임 컨텍스트

내 팝업에 z-index: 9999를 줬는데도 z-index: 2인 헤더 밑으로 깔리는 경우가 있습니다. 이는 내 팝업의 부모 요소가 이미 새로운 쌓임 컨텍스트(Stacking Context)를 생성했고, 부모의 z-index가 헤더보다 낮기 때문입니다.

• 쌓임 컨텍스트 생성 조건: position: absolute/relative 이면서 z-index가 auto가 아닌 경우.
• 새로운 생성 조건: opacity가 1보다 작을 때, transform, filter 속성이 적용될 때.

부모 태그에 무심코 opacity: 0.9나 transform을 주었다면, 자식 요소들은 영원히 부모의 층(Layer)을 벗어날 수 없습니다. 모달창이나 드롭다운이 겹칠 땐 최상위 부모들의 z-index 서열부터 정리하세요.

---

지금까지 z-index의 동작 원리와 쌓임 컨텍스트(Stacking Context)에 대해 살펴보았습니다. z-index 계층 구조를 사전에 명확히 기획해야 유지보수가 쉬워집니다.