z-index를 "큰 숫자가 위" 정도로만 외웠는지, 맥락 생성 조건과 비교 범위를 함께 보는 모델로 설명하는지를 가르려는 질문이다. 답에 따라 transform·opacity·portal 사용 같은 후속 질문이 갈린다.
쌓임 맥락(stacking context)은 브라우저가 요소들을 z축에서 어떻게 겹쳐 그릴지 정할 때 쓰는 독립된 정렬 단위다. 어떤 요소가 position + z-index, opacity < 1, transform, filter, will-change, isolation: isolate 같은 조건을 만나면 자신을 루트로 하는 새 맥락을 만들고, 자식들의 z-index 비교는 그 맥락 안에서만 일어난다. 즉 자식이 z-index: 9999여도 부모 맥락이 다른 형제 맥락보다 뒤로 깔려 있으면 화면에서는 아래에 그려진다. z-index는 "숫자 크기 경쟁"이 아니라 "같은 맥락 안에서만 통하는 상대 정렬"이다.
모달이 배경 위에 안 떠서 부모의 transform·opacity가 새 맥락을 만든 걸 찾아낸 경험이 있다면 그 추적 과정을 그대로 풀 수 있다
Portal로 모달을 옮겨 z-index 충돌을 해결한 경험이 있다면 맥락 경계를 옮긴 사례로 연결할 수 있다
디자인 시스템에 z-index 단계(z-toast·z-modal 등)를 정의해 본 경험이 있다면 숫자가 아니라 계층 설계 사례로 이어 쓸 수 있다
DevTools의 Layers·3D 뷰로 쌓임 순서를 추적해 본 경험이 있다면 어디서 맥락이 끊기는지 시각적으로 설명하기 좋다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.