CSS에서 stacking context는 왜 중요한가요?

stacking context는 요소들이 z축으로 쌓이는 독립적인 맥락입니다. z-index, opacity, transform, position 등 특정 속성으로 생성될 수 있으며, 서로 다른 stacking context 안의 자식 요소는 단순히 z-index 숫자만으로 전체 순서를 비교할 수 없습니다.

핵심 개념

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

z-index가 예상대로 동작하지 않는 원인을 부모 요소의 맥락에서 찾아보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

부모에 transform이 적용되면 자식 모달의 z-index를 크게 줘도 다른 stacking context의 헤더 뒤에 가려질 수 있습니다.

실무에서 적용하는 방법

모달, 툴팁, 드롭다운은 가능한 한 포털이나 명확한 레이어 시스템으로 관리합니다.

실무에서 주의할 점

• 무작정 z-index 값을 키우면 장기적으로 레이어 규칙이 무너집니다.
• opacity가 1보다 작거나 transform이 있는 요소도 stacking context를 만들 수 있습니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

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

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

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

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, stacking context는 요소들이 z축으로 쌓이는 독립적인 맥락입니다. z-index, opacity, transform, position 등 특정 속성으로 생성될 수 있으며, 서로 다른 stacking context 안의 자식 요소는 단순히 z-index 숫자만으로 전체 순서를 비교할 수 없습니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.