z-index 레이어 시스템이란?
웹 UI에서 여러 컴포넌트가 겹칠 때 어느 요소가 위에 표시될지는 z-index 값이 결정합니다. 값이 클수록 앞에 렌더링되며, 같은 stacking context 내에서만 비교됩니다.
z-index를 임의로 쓰면 z-index: 9999, 99999 같은 무분별한 값이 코드베이스에 퍼지고, 레이어 충돌 버그가 잦아집니다. 처음부터 체계적인 스케일(0·100·200·…)을 정해 두면 팀 전체가 일관성 있게 쓸 수 있습니다.
설계 원칙
100 단위 구간을 사용하면 나중에 중간 레이어를 삽입할 여유가 생깁니다. Overlay(400)와 Modal(500)을 반드시 분리해야 딤 처리가 모달 아래에 위치할 수 있습니다. Toast(800)는 Modal(500)보다 높아야 모달이 열렸을 때도 알림이 보입니다.
stacking context 주의사항
transform, opacity < 1, filter, will-change 속성을 적용한 요소는 새로운 stacking context를 생성합니다. 자식 요소의 z-index가 아무리 높아도 부모의 stacking context를 벗어날 수 없으므로, 모달·오버레이는 가능하면 <body> 직하위(React Portal 등)에 렌더링하는 것이 안전합니다.
자주 묻는 질문
토스트(알림)가 더 높아야 합니다. 모달이 열린 상태에서도 알림은 위에 보여야 하므로 토스트(800)를 모달(500)보다 높게 설정합니다.
일반적으로 작동하지 않습니다. position: static인 요소에는 z-index가 무시됩니다. 단, Flexbox·Grid의 직접 자식 요소는 position 없이도 z-index가 적용됩니다.
기능적으로는 동작하지만 유지보수가 어렵습니다. 체계 없이 큰 값을 쓰면 누군가 더 큰 값을 추가하는 악순환이 생깁니다. 100 단위 스케일로 미리 설계하는 것을 권장합니다.