🌱 기초 프론트엔드
z-index가 뭔가요?
쉽게 이해하기
책상 위에 여러 장의 종이를 겹쳐 놓는다고 생각해보세요. 어떤 종이를 맨 위에 올릴지, 어떤 걸 아래로 내릴지 순서를 정하는 거예요. z-index는 바로 이 '레이어 순서'를 숫자로 지정하는 방법이에요.
핵심 정리
요소들이 겹칠 때 누가 위로 올라올지 결정하는 CSS 속성이에요.
자세히 알아보기
웹페이지에서 요소들이 겹쳐질 때가 자주 있어요. 예를 들어 모달 창, 드롭다운 메뉴, 툴팁 같은 것들이 대표적이죠. 이럴 때 z-index를 사용하면 어떤 요소가 위로 올라올지 제어할 수 있어요.
z-index는 숫자 값으로 지정하는데, 숫자가 클수록 위로 올라와요. 예를 들어 z-index: 10인 요소는 z-index: 5인 요소보다 위에 표시됩니다. 음수 값도 사용할 수 있어요.
실무에서는 보통 모달 배경에 z-index: 100, 모달 창에 z-index: 101 이런 식으로 값을 부여해요. 헤더 네비게이션은 z-index: 1000, 알림 토스트는 z-index: 9999처럼 용도별로 범위를 정해두면 관리하기 편해요.
주의할 점은 z-index가 작동하려면 position 속성이 static이 아니어야 한다는 거예요. relative, absolute, fixed, sticky 중 하나여야 z-index가 제대로 적용됩니다. 초보자들이 자주 놓치는 부분이에요.