z-index 올려도 메뉴가 가려질 때, 쌓임 맥락(stacking context) 확인법
드롭다운 메뉴나 팝업이 다른 영역 밑으로 숨어서 z-index를 9999, 99999까지 올려 봤는데도 그대로라면 숫자 문제가 아닙니다. 그 요소를 감싼 부모가 이미 쌓임 맥락(stacking context)을 만들고 있어서, 안쪽 숫자가 바깥과 비교되지 않는 경우가 대부분입니다.
원인 찾는 순서와 고치는 방법을 정리했습니다.
💡 숫자가 큰데 왜 아래에 깔리나요?
z-index는 페이지 전체에서 한 줄로 비교되는 값이 아닙니다. 같은 쌓임 맥락 안에 있는 형제끼리만 비교됩니다. 부모 A가 z-index: 1, 옆 영역 B가 z-index: 2라면, A 안의 메뉴에 9999를 줘도 A 전체가 B보다 아래에 있으니 메뉴도 B 밑에 깔립니다. 반에서 1등이어도 반 자체가 아래 층에 있으면 소용없는 것과 같습니다.
1. 먼저 z-index가 적용되는 조건인지 확인
가장 흔한 실수는 position이 없는 요소에 z-index만 준 경우입니다. 일반 블록 요소는 position: static이 기본값이라 z-index를 무시합니다. 단, flex나 grid의 자식 요소는 position 없이도 z-index가 적용됩니다.
/* 효과 없음: position이 static */
.dropdown { z-index: 100; }
/* 적용됨 */
.dropdown {
position: absolute;
z-index: 100;
}2. 부모 중에 쌓임 맥락을 만드는 속성 찾기
조건이 맞는데도 안 된다면 개발자 도구에서 문제 요소부터 부모를 하나씩 거슬러 올라가며 아래 속성이 있는지 봅니다. 실무에서는 애니메이션 때문에 넣어 둔 transform이나 opacity, 그리고 고정 헤더의 position: fixed가 범인인 경우가 많았습니다.
| 속성 | 쌓임 맥락이 생기는 경우 |
|---|---|
| position + z-index | relative/absolute에 z-index 값(auto 제외)이 있을 때 |
| position | fixed 또는 sticky일 때 |
| opacity | 1보다 작을 때 |
| transform, filter | none이 아닐 때 |
| will-change | 위 속성을 미리 지정했을 때 |
| isolation | isolate일 때 |
3. 고치는 방법은 둘 중 하나
첫째, 비교가 일어나는 층에서 숫자를 조정합니다. 메뉴가 아니라 메뉴를 감싼 헤더 자체의 z-index를 옆 영역보다 높이는 식입니다. 둘째, 팝업이나 모달처럼 항상 맨 위에 떠야 하는 요소는 HTML 구조상 <body> 바로 아래로 빼 두는 것이 가장 확실합니다. 어떤 부모 영향도 받지 않기 때문입니다.
/* 사이트 공통 층 번호를 정해 두면 숫자 경쟁이 사라집니다 */
:root {
--z-header: 100;
--z-dropdown: 200;
--z-modal: 1000;
}
.header { position: relative; z-index: var(--z-header); }
반대로 의도치 않게 바깥 요소와 섞이는 걸 막고 싶을 때는 컴포넌트 최상단에 isolation: isolate를 주면 다른 스타일 변화 없이 쌓임 맥락만 새로 만들 수 있습니다.
"z-index는 숫자보다 층 구조를 먼저 봐야 풀립니다."
나눔웹은 퍼블리싱 단계에서 헤더, 메뉴, 팝업의 층 순서를 미리 정해 두어
오픈 후에 메뉴가 가려지는 일이 없도록 작업합니다.