z-index

z-index는 position이 static이 아닌 HTML 요소의 z축 쌓임 순서를 지정하는 CSS 속성이다.

핵심 특징

• 값이 클수록 사용자에게 더 가까운(위에 그려지는) 레이어에 위치
• 음수 허용 — 일반 흐름 요소 뒤로 보낼 수 있음
• 효과는 같은 쌓임 맥락 내에서만 비교됨
• z-index: auto는 정수 0과 동일하지만 새로운 쌓임 맥락을 생성하지 않음

쌓임 맥락과의 관계

부모 A: z-index 1  →  쌓임 맥락 생성
  └ 자식: z-index 999
부모 B: z-index 2  →  쌓임 맥락 생성

결과: B > 자식(999) > A

자식의 z-index가 아무리 커도 부모 쌓임 맥락의 z-index를 이길 수 없다.

핵심 정리

z-index가 예상대로 작동하지 않으면 먼저 요소에 position이 설정됐는지, 부모가 새로운 쌓임 맥락을 만드는지 확인한다.