Stacking Context가 생기는 조건과 z-index 문제 해결 방법을 설명해주세요.

Stacking Context는 z축 쌓임의 독립 기준입니다. position과 z-index뿐 아니라 opacity, transform, filter, isolation 등으로도 생길 수 있어 z-index 문제는 부모 레이어 구조까지 확인해야 합니다.

핵심 개념

핵심 기준은 독립적인 z축 맥락과 부모 레이어입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

CSS는 cascade, layout, stacking context가 함께 동작합니다. 작은 속성 하나가 화면 전체의 배치나 접근성에 영향을 줄 수 있어 동작 원리를 알고 써야 합니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.panel {
  transform: translateZ(0); /* 새로운 stacking context를 만들 수 있음 */
}

z-index 숫자만 키워도 해결되지 않는 경우는 부모 stacking context를 확인해야 합니다.

실무에서 주의할 점

• 속성 하나가 새로운 formatting context나 stacking context를 만들 수 있습니다.
• 고정 크기만으로 반응형을 처리하면 작은 화면에서 쉽게 깨집니다.
• 포커스 스타일과 색 대비를 제거하면 접근성이 크게 나빠집니다.

함께 연결해서 보면 좋은 키워드

CSS, z-index, StackingContext, 레이어

정리

한 줄로 정리하면, Stacking Context는 z축 쌓임의 독립 기준입니다. position과 z-index뿐 아니라 opacity, transform, filter, isolation 등으로도 생길 수 있어 z-index 문제는 부모 레이어 구조까지 확인해야 합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

Stacking Context란?

Stacking Context는 z축 쌓임 순서를 독립적으로 계산하는 영역입니다. z-index가 아무리 커도 다른 stacking context 밖의 요소와 직접 비교되지 않을 수 있습니다.

.parent {
  position: relative;
  z-index: 1;
}
.child {
  position: absolute;
  z-index: 9999;
}
.sibling {
  position: relative;
  z-index: 2;
}

위 경우 .child의 9999는 .parent 내부에서만 의미가 있고, .sibling이 .parent보다 위에 그려질 수 있습니다.

생성 조건 예

• positioned 요소 + z-index가 auto가 아님
• position: fixed 또는 sticky
• opacity < 1
• transform, filter, perspective
• isolation: isolate
• contain: paint

해결 접근

무작정 z-index: 999999를 올리기보다, 어떤 부모가 stacking context를 만들었는지 찾고 필요한 경우 모달/툴팁을 portal로 body 아래 렌더링합니다.