CSS의 stacking context는 z-index 동작에 어떤 영향을 주나요?

stacking context는 요소들이 z축으로 쌓이는 독립적인 맥락입니다. z-index는 같은 stacking context 안에서 비교되며, 부모가 새로운 stacking context를 만들면 자식의 z-index가 아무리 커도 부모 맥락 밖의 요소를 넘어설 수 없습니다.

핵심 개념

핵심 기준은 독립적인 z축 쌓임 맥락입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

모달, 드롭다운, 토스트처럼 화면 위에 떠야 하는 UI는 z-index 문제를 자주 만납니다. 이때 단순히 숫자를 키우는 것보다 어떤 요소가 새로운 stacking context를 만들었는지 파악해야 원인을 찾을 수 있습니다.

동작 흐름

1. 겹쳐 보이는 요소들의 부모 구조를 확인합니다.
2. position, opacity, transform, isolation 등 stacking context 생성 조건을 찾습니다.
3. 같은 맥락 안에서 z-index가 비교되는지 확인합니다.
4. 필요하면 DOM 위치나 portal, stacking context 생성을 조정합니다.

실제 예시

.card {
  transform: translateZ(0);
}

.dropdown {
  position: absolute;
  z-index: 9999;
}

부모인 .card가 transform으로 새로운 stacking context를 만들면, dropdown의 큰 z-index도 카드 맥락 안에서만 의미를 가질 수 있습니다.

실무에서 주의할 점

• z-index 숫자를 계속 키우는 방식은 장기적으로 관리가 어려워집니다.
• transform, opacity 값이 의도치 않게 stacking context를 만들 수 있습니다.
• 모달류 UI는 portal로 상위 레이어에 렌더링하는 전략도 고려할 수 있습니다.

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

CSS, z-index, stacking-context, 레이아웃

면접에서 짚으면 좋은 포인트

• z-index 숫자 경쟁보다 stacking context 생성 조건을 찾는 디버깅 절차를 말하면 실무적인 답변이 됩니다.
• 모달·툴팁은 전역 레이어 체계나 portal 전략과 함께 설계하는 것이 좋습니다.

정리

한 줄로 정리하면, stacking context는 z-index가 비교되는 범위를 제한하므로, 겹침 문제는 숫자보다 맥락을 먼저 확인해야 합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.