[CSS] z-index값을 아무리 크게 해도 위로 안올라오는 문제 해결
·
Frontend/CSS
개요CSS에서 Z축을 표현할 때는 주로 z-index 속성에 정수 값을 입력하여 어떤 요소를 위로 올릴지 결정한다.아래 그림처럼 z-index 값이 클수록 요소가 더 위에 쌓이는 것을 확인할 수 있다.이슈그러나 z-index는 단순히 요소를 위로 올리는 속성이라고 생각했던 찰나, z-index 값을 아무리 높게 설정해도 요소가 위로 올라오지 않는 현상을 발견했다.아래 그림에서는 모달창이 헤더 아래에 가려져 있는 모습을 확인할 수 있으며, 이때 모달의 z-index는 101이고 헤더는 100으로 설정되어 있다.z-index를 높게 설정하면 낮은 값의 요소보다 위에 표시되어야 하는 것이 아닌가? 라는 의문이 들었고, 이 궁금증을 해결하기 위해 z-index와 쌓임 맥락(Stacking Context)에 대해..
okojin