Stacking Context 의 원리

드롭다운 메뉴나 모달 팝업 요소에 z-index: 9999를 줬는데도, 다른 카드나 부모 영역 뒤로 깔려버리는 경우도 생긴다. 브라우저가 화면을 3차원 레이어로 겹쳐 그릴 때 적용하는 Stacking Context 때문이다.

렌더링 순서의 기본 동작

특별한 z-index 설정이 없는 형제 요소들 사이에서는 나중 요소가 화면 앞쪽에 그려진다.

html

<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>

css

.box {
  width: 100px;
  height: 100px;
}
.red {
  background: red;
  position: relative;
  top: 40px;
}
.blue {
  background: blue;
}
.green {
  background: green;
}

원래는 나중에 선언된 .blue가 위에 와야 하지만, .red에 position: relative를 부여하면 브라우저는 포지션이 지정된 요소를 일반 흐름 요소보다 앞쪽에 렌더링한다. 따라서 40px 밀려난 .red가 .blue 위로 올라온다.

Stacking Context 이 가둬버리는 Z축 범위

부모 쌓임 맥락에 갇힌 자식 z-index

Stacking Context 는 브라우저가 렌더링을 계산하는 독립된 3차원 레이어 그룹이다. 보이는 건 2d 이지만, 계산을 위해서 3d의 개념을 사용한 것이다.

핵심 규칙은 간단하다. 자식 요소의 z-index는 해당 부모 내부에서만 유효하다. 자식 요소에 99999를 부여해도, 부모의 Stacking Context 자체의 Z축 순서가 낮으면 외부의 다른 요소 위로 올라갈 수 없다.

html

<header class="header">
  <div class="nav-item">
    <div class="dropdown" style="z-index: 9999;">드롭다운</div>
  </div>
</header>

<main class="content" style="position: relative; z-index: 2;">
  <h2>메인 콘텐츠</h2>
</main>

css

.header {
  position: relative;
  z-index: 1; /* 헤더 전체가 z-index: 1 인 쌓임 맥락 형성 */
}

헤더가 z-index: 1인 쌓임 맥락을 가진 순간, 내부의 .dropdown이 가진 z-index: 9999는 .header 내부에서의 순서일 뿐이다. z-index: 2를 가진 .content 영역보다 헤더 전체가 뒤에 있어서 드롭다운은 뒤로 가려지게 된다.

맥락이 새로 생기는 조건

position 뿐 아니라 특정 CSS 속성을 사용하다 보면 새로운 Stacking Context 이 형성된다.

루트 요소: <html>
포지션 관련: position이 absolute 또는 relative이면서 z-index가 auto가 아닌 숫자일 때, position: fixed 또는 sticky인 요소
Flex/Grid 자식: z-index가 auto가 아닌 숫자일 때

그래픽 레이어

그래픽 레이어에서 Compositing 해야하는 css 속성들은 대부분 새로운 Stacking Context 를 구성한다. 만약 브라우저가 레이어를 분리하지 않고 자식 요소들을 화면에 바로 그리면서 각각 opacity를 적용하면 렌더링 왜곡이 발생한다.

의도한 결과: 부모와 자식들을 포함한 하나의 완성된 박스 전체가 50% 투명함.
레이어를 분리하지 않았을 때의 문제:
부모 배경이 50% 투명하게 그려짐.
그 위에 자식 1이 50% 투명하게 그려짐.
자식 1과 겹치는 자식 2가 또 50% 투명하게 그려지면서 자식끼리 겹치는 부분이 이중으로 투명해짐 (25% 투과).

이를 방지하기 위해 브라우저는 이 요소와 자식들을 하나의 독립된 Offscreen Buffer 에 먼저 온전하게 렌더링한 후, 그 결과물 전체에 불투명도를 적용해 부모 레이어 위에 합성해야 한다.

불투명도: opacity가 1보다 작은 요소 (opacity: 0.99만 주어도 렌더링 레이어가 분리됨)
CSS 트랜스폼/필터: transform, filter, perspective, clip-path, mask 속성이 none이 아닐 때
그래픽 합성: mix-blend-mode가 normal이 아닐 때
성능 최적화 및 격리: will-change 속성에 쌓임 맥락 생성 속성이 들어갔을 때, contain이 layout이나 paint를 포함할 때
명시적 격리: isolation: isolate가 지정된 요소

GPU 하드웨어 가속과 레이어 승격 원리도 이처럼 그래픽 합성을 위한 레이어 분리와 관련된다.

실수하기 쉬운 포인트

UI 카드에 마우스 호버 효과로 transform: translateY(-4px)나 opacity 트랜지션을 걸어둘 때가 있다. 애니메이션이 시작되는 순간 브라우저는 불투명도 계산과 3D 합성을 위해 새로운 Stacking Context 을 만들어낸다. 그 결과 카드 내부에 띄워두었던 툴팁이나 서브 메뉴가 옆 카드 레이어에 가려지는 현상이 발생한다.

css

.card {
  isolation: isolate; /* 외부와 분리된 독립 쌓임 맥락 명시 */
}

부모 요소의 z-index를 건드리지 않고 내부 요소들이 외부 Z축에 영향을 주지 않도록 하려면 isolation: isolate를 사용하면 된다.

스타일 구조상 부모의 쌓임 맥락을 제어할 수 없다면, 대상 UI의 DOM 위치를 완전 외부로 옮겨 렌더링하면 된다.

React의 createPortal이나 Vue의 <Teleport> 사용
HTML 표준으로는 <dialog> 태그 또는 Popover API 활용

지난 일주일

지난 3개월

2026년

2025년

2024년

2023년

2022년

Stacking Context 의 원리

렌더링 순서의 기본 동작

Stacking Context 이 가둬버리는 Z축 범위

맥락이 새로 생기는 조건

그래픽 레이어

실수하기 쉬운 포인트

댓글 0개

Stacking Context 의 원리

렌더링 순서의 기본 동작

Stacking Context 이 가둬버리는 Z축 범위

맥락이 새로 생기는 조건

그래픽 레이어

실수하기 쉬운 포인트

좋아요와 댓글

댓글 0개