한 번쯤 이런 상황 겪어봤을 거다 👇“z-index: 9999를 줬는데도 왜 안 올라오지?”이게 바로 단순한 숫자 문제가 아니라‘쌓임 맥락(Stacking Context)’ 때문이다.이번 글에서는 z-index의 동작 원리부터브라우저가 요소를 어떤 순서로 겹치는지 완벽히 이해하도록 정리했다.💡 1. z-index란 무엇인가?“요소가 화면의 앞/뒤 중 어디에 위치할지를 결정하는 속성”HTML 요소들은 화면 위에 층(layer) 처럼 쌓인다.이때 어떤 요소가 위로, 어떤 요소가 아래로 갈지를 정하는 것이 z-index..box1 { position: relative; z-index: 1; } .box2 { position: relative; z-index: 2; } ✅ .box2가 .box..