핵심 요약
z-index를 아무리 크게 줘도 안 올라오는 건, 그 요소가 부모가 만든 쌓임 맥락(stacking context) 안에 갇혀 있기 때문이다. z-index는 같은 맥락 안에서만 비교된다. transform, opacity < 1, filter, position+z-index 등이 새 맥락을 만든다.
1. 쌓임 맥락을 만드는 속성
position: relative/absolute/fixed+ z-index 값transform,filter,perspective,will-changeopacity가 1 미만- flex/grid 자식에 z-index 지정
2. 진단·해결
/* 모달이 헤더 뒤에 깔릴 때 */
/* 원인: 조상에 transform: ... 이 있어 맥락이 갇힘 */
/* 해결 1: 모달을 body 바로 아래로 portal */
/* 해결 2: 맥락을 만든 조상의 z-index를 함께 조정 */3. 함정
- z-index: 999999 같은 폭탄은 맥락이 다르면 무의미하다
- 모달·툴팁은 React Portal로 DOM 최상단에 띄우는 게 근본 해결
- 크롬 개발자도구 "Layers" 패널로 맥락을 시각적으로 확인 가능
자주 묻는 질문
z-index를 엄청 크게 주면 되지 않나요?
같은 쌓임 맥락 안에서만 비교되므로, 다른 맥락에 갇혀 있으면 100만을 줘도 못 올라옵니다. 맥락 구조를 봐야 합니다.
모달이 자꾸 뒤에 깔립니다.
조상 중 transform/opacity로 맥락을 만든 요소가 있을 가능성이 높습니다. 모달을 Portal로 body 직속에 렌더하면 대부분 해결됩니다.
댓글 0