한 줄 요약
요소가 겹칠 때 누가 위에 올지는 z-index가 정하지만, 그 비교는 같은 ‘서류 묶음’ 안에서만 일어납니다.
비유로 이해하기
책상 위에 서류를 겹쳐 쌓는 장면을 떠올려 보세요. 번호가 큰 서류가 위로 올라갑니다. 이 번호가 z-index입니다. 기본적으로는 나중에 놓인(코드에서 뒤에 있는) 요소가 위에 옵니다.
그런데 서류가 클립으로 묶인 묶음 안에 있다면? 묶음 안 서류의 번호가 999여도, 묶음 자체가 아래에 깔려 있으면 위로 못 올라갑니다. 이 묶음을 ‘쌓임 맥락(stacking context)’이라고 부릅니다.
비교해 보기
- z-index는 position이 static이 아닌 요소(또는 flex·grid 자식)에서 작동합니다.
- 같은 묶음 안에서는 숫자가 큰 쪽이 위.
- 다른 묶음끼리는 묶음의 순서로 결정. 그래서 “z-index: 9999인데 안 올라와요” 같은 일이 생깁니다.
직접 실행해 보기
초록 카드(z-index: 2)가 위에 있습니다. 노랑 카드의 z-index를 3으로 바꿔 보세요. 그다음 아래쪽 묶음 실험에서 .folder의 z-index: 1을 지우면 안쪽 서류가 999로 위에 올라오는 걸 볼 수 있습니다.
GenerateBlocks에서는
GenerateBlocks에서도 Position과 Z-Index를 함께 설정할 수 있습니다. 헤더 메뉴가 다른 섹션 뒤로 숨는다면 숫자를 키우기 전에, 어떤 상자가 ‘묶음’을 만들고 있는지 먼저 확인하세요.
참고: Josh W. Comeau: What The Heck, z-index?? · web.dev: Z-index and stacking contexts · MDN: Stacking context