z-index 값이 매우 크면 문제가 생기나요?

z-index 최댓값은 2,147,483,647이지만, 실무에서는 0~1000 범위를 체계적으로 나누어 사용하는 것이 유지보수에 유리합니다. 무분별하게 큰 값을 쓰면 레이어 충돌이 발생하기 쉽습니다.

position 속성 없이 z-index가 작동하나요?

아닙니다. z-index는 position이 static이 아닌 요소(relative, absolute, fixed, sticky)에서만 작동합니다. 또한 Flexbox·Grid 자식 요소에서는 position 없이도 z-index가 적용됩니다.

🔢 z-index 레이어 가이드

Q: 모달과 토스트 중 어느 쪽 z-index가 더 높아야 하나요?

토스트(알림)가 더 높아야 합니다. 모달이 열려 있을 때도 알림이 위에 표시돼야 하므로 토스트는 모달보다 높은 z-index를 사용합니다. 일반적으로 모달 500, 토스트 800 수준을 권장합니다.

UI 컴포넌트 선택

z-index 레이어 체계 표준

레이어	z-index	컴포넌트 예시
기본	0	기본 콘텐츠, 배경
Sticky	100	고정 헤더, 스티키 테이블 헤더
Dropdown	200	셀렉트박스, 자동완성, 날짜 피커
Fixed Nav	300	플로팅 버튼, 고정 사이드바
Overlay	400	모달 배경(딤), 드로어 오버레이
Modal	500	다이얼로그, 확인/취소 모달
Popover	600	팝오버, 컨텍스트 메뉴, 색상 피커
Tooltip	700	마우스 오버 툴팁, 도움말 버블
Toast	800	알림 메시지, 스낵바
Loading	900	전체 화면 로딩, 스켈레톤 오버레이
Critical	1000	긴급 오류 알림, GDPR 쿠키 배너

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 등)에 렌더링하는 것이 안전합니다.

자주 묻는 질문

모달과 토스트 중 어느 쪽 z-index가 더 높아야 하나요?

토스트(알림)가 더 높아야 합니다. 모달이 열린 상태에서도 알림은 위에 보여야 하므로 토스트(800)를 모달(500)보다 높게 설정합니다.

position 없이 z-index가 작동하나요?

일반적으로 작동하지 않습니다. position: static인 요소에는 z-index가 무시됩니다. 단, Flexbox·Grid의 직접 자식 요소는 position 없이도 z-index가 적용됩니다.

z-index: 9999처럼 큰 값을 써도 되나요?

기능적으로는 동작하지만 유지보수가 어렵습니다. 체계 없이 큰 값을 쓰면 누군가 더 큰 값을 추가하는 악순환이 생깁니다. 100 단위 스케일로 미리 설계하는 것을 권장합니다.

z-index 레이어 체계 표준

z-index 레이어 시스템이란?

설계 원칙

stacking context 주의사항

자주 묻는 질문

같은 카테고리 도구