개발을 하면서 요소의 쌓임 순서를 제어할 때, 주로 요소들이 서로 겹칠 때 어떤 요소가 위에 보일지 결정하기 위해 z-index를 설정한다. z-index 값이 높을 수록 해당 요소가 화면에 더 앞에 표시된다. 하지만 값이 높더라도 앞에 오지 않는 경우가 있는데, 이에 대해 알아보도록 하자.
z-index
요소의 쌓임 순서를 제어하는 속성
z-index는 position 값이 relative, absolute, fixed, sticky 일 때만 적용된다.
z-inde의 값이 높을 수록 앞에 나타나는 것을 알 수 있다.
edge 브라우저의 개발자 모드에서 3D로 확인 가능하다.
쌓임 맥락(Stacking Context)
가상의 Z축을 사용한 HTML 요소의 3차원 개념화
<body> <div class="div1"> <div class="div1-1"></div> <div class="div1-2"></div> </div> <div class="div2"> <div class="div2-1"></div> <div class="div2-2"></div> </div> </body>
루트 요소인 body에서 div1과 div2를 가진 쌓임 맥락이 존재하고, div1에서 div1-1과, div1-2를 가진 쌓임 맥락이 또 존재한다. 마찬가지로 div2에서 div1-1과, div1-2를 가진 쌓임 맥락이 존재 한다.
div1과 div2는 쌓임 순서가 앞뒤로 왔다 갔다 할 수 있다. 마찬가지로 div1 내에서 div1-1과 div1-2도 앞뒤로 왔다 갔다 할 수 있다. div1의 z-index가 div2보다 높다 했을 경우 div2-1의 z-index를 아무리 높게 설정하여도 div1-2 앞으로 올 수 없다.
FE Developer