CSSHard#436
CSS stacking context는 무엇이며 z-index가 예상대로 동작하지 않는 이유를 설명해주세요.
#CSS#StackingContext#z-index#레이아웃
답변 포인트
z-index는 전역 숫자 싸움이 아니라 같은 stacking context 안에서 비교된다는 점이 핵심입니다.
정답 및 해설
빠른 요약
Stacking context는 요소들이 z축으로 쌓이는 독립적인 기준 공간입니다. 많은 사람이 `z-index: 9999`면 무조건 위에 올라온다고 생각하지만, 실제로는 같은 stacking context 안에서만 비교됩니다.
Stacking context는 요소들이 z축으로 쌓이는 독립적인 기준 공간입니다. 많은 사람이 z-index: 9999면 무조건 위에 올라온다고 생각하지만, 실제로는 같은 stacking context 안에서만 비교됩니다.
새 stacking context를 만드는 대표 조건은 다음과 같습니다.
- position이 있고 z-index가 auto가 아닌 요소
opacity < 1transform,filter,perspectiveisolation: isolateposition: fixed,sticky- 일부
contain,will-change
예를 들어 부모 A가 stacking context를 만들고 z-index가 1이라면, 그 안의 자식이 z-index 9999여도 부모 A 바깥의 z-index 2 요소보다 위로 올라갈 수 없습니다. 자식은 부모가 만든 세계 안에서만 높은 것입니다.
해결 방법은 숫자를 더 키우기 전에 어떤 요소가 stacking context를 만들었는지 찾는 것입니다. DevTools로 부모를 거슬러 올라가며 transform, opacity, z-index를 확인하면 원인이 자주 보입니다.
모달, 토스트, 드롭다운처럼 전역 overlay가 필요한 UI는 DOM 상단에 portal로 빼거나, 레이어 시스템을 디자인 토큰으로 관리하는 것이 안정적입니다.