브라우저 스태킹 컨텍스트란?

Document (root stacking context)
  ├── A (z-index: 1, 새 stacking context 생성)
  │     └── A-1 (z-index: 9999)  ← A 안에 갇혀 있음
  └── B (z-index: 2, 새 stacking context 생성)
        └── B-1 (z-index: 1)

/* 스태킹 컨텍스트를 생성하는 속성들 */

/* 1. position + z-index */
.el { position: relative; z-index: 1; }    /* ← z-index가 auto가 아니면 생성 */
.el { position: absolute; z-index: 0; }
.el { position: fixed; }                   /* ← z-index 없어도 생성 */
.el { position: sticky; }                  /* ← z-index 없어도 생성 */

/* 2. opacity */
.el { opacity: 0.99; }                     /* ← 1 미만이면 생성 */

/* 3. transform */
.el { transform: translateX(0); }          /* ← none이 아니면 생성 */

/* 4. filter */
.el { filter: blur(0px); }                 /* ← none이 아니면 생성 */

/* 5. isolation */
.el { isolation: isolate; }               /* ← 명시적으로 생성 */

/* 6. will-change */
.el { will-change: transform; }            /* ← GPU 레이어로 분리하면서 생성 */

/* 7. mix-blend-mode */
.el { mix-blend-mode: multiply; }

/* 8. clip-path, mask */
.el { clip-path: inset(0); }

같은 스태킹 컨텍스트 내 쌓임 순서 (아래에서 위로)

1. 스태킹 컨텍스트를 만든 요소 자체의 배경과 테두리
2. z-index가 음수인 자식 스태킹 컨텍스트
3. position이 없는 블록 요소 (div, p 등)
4. float 요소
5. position이 없는 인라인 요소
6. z-index가 auto 또는 0인 position 요소
7. z-index가 양수인 자식 스태킹 컨텍스트

<div class="sidebar" style="transform: translateX(0);">  <!-- ← 스태킹 컨텍스트 생성! -->
  <div class="tooltip" style="z-index: 100;">툴팁</div>
</div>

<div class="modal" style="z-index: 50;">모달</div>

Document
  ├── .sidebar (transform으로 스태킹 컨텍스트 생성, z-index: auto)
  │     └── .tooltip (z-index: 100)  ← sidebar 안에 갇힘
  └── .modal (z-index: 50)           ← sidebar보다 위에 올 수 있음

.parent {
  opacity: 0.99;       /* ← 이것만으로 스태킹 컨텍스트 생성 */
}

.child {
  z-index: 9999;       /* ← 의미 없음. parent 안에 갇혀 있음 */
  position: absolute;
}

.card {
  transition: transform 0.3s;   /* transform 시작 전: 스태킹 컨텍스트 없음 */
}

.card:hover {
  transform: scale(1.05);       /* ← hover 시 스태킹 컨텍스트 생성 */
}

.component {
  isolation: isolate;   /* ← z-index, transform, opacity 변화 없이 스태킹 컨텍스트 생성 */
}

<!-- 외부 z-index 환경에 영향받지 않는 독립된 컴포넌트 -->
<div class="dropdown" style="isolation: isolate;">
  <div class="dropdown-trigger">메뉴</div>
  <div class="dropdown-menu" style="z-index: 10;">   <!-- ← 이 컴포넌트 안에서만 유효 -->
    <ul>...</ul>
  </div>
</div>

DevTools → Elements 탭 → 요소 선택 → Computed 탭
→ "Stacking context" 항목 확인

DevTools → 우측 상단 점 세 개 → More tools → Layers