✅ 쌓임 맥락
투명한 도화지가 있다고 합시다. 여기에 색종이로 접은 학을 붙입니다.
그 위에 물고기를 붙인 도화지를 올리면, 두 색종이는 같은 선상에 있는 것처럼 보이지만
사실 물고기가 학의 위에 위치하죠.
물고기를 학의 위에 겹치도록 놓으면 학이 가려져 보이지 않을 거고요.
이렇듯 하나의 투명한 도화지, 하나의 층을 쌓임 맥락이라고 합니다.
그럼 아무리 학을 붙인 도화지에서, 학 위에 다른 색종이를 덧붙여도
그게 물고기의 위에 놓이는 일은 없겠죠. 왜냐하면 물고기를 붙인 도화지 자체가 더 위에 있거든요.
쌓임 맥락은 층을 형성하고, 같은 쌓임 맥락에 있는 요소들을 그 안에서 쌓아 올립니다.
z-index는 같은 쌓임 맥락에서만 순서를 정할 수 있습니다.
쌓임 맥락의 형성
새로운 쌓임 맥락은 다음과 같은 요소에서 생성됩니다.
- 문서의 루트 요소
html position이absolute나relative이고z-index값이auto가 아닌 요소position이fixed나sticky인 요소 (이 때는z-index없어도 됨)opacity가 1보다 작은 요소flex나grid컨테이너의 자식이며z-index값이auto가 아닌 요소transform,filter,clip-path... 가none이 아닌 요소
등등... 입니다. 찾아보면 더 많습니다.
isolation 프로퍼티
isolation 프로퍼티는 요소가 새로운 쌓임 맥락을 형성할 지 지정합니다.
이 프로퍼티를 이용하면 별다른 설정 없이 요소가 쌓임 맥락을 형성하도록 만들 수 있습니다.
값은 다음과 같습니다.
auto: 기본값, 쌓임 맥락을 형성해야 할 때만 생성isolate: 항상 새로운 쌓임 맥락을 생성
📚 z-index
z-index 는 요소의 z축 순서를 지정하는 프로퍼티로 기본값은 auto 이며,
z-index 의 값이 클수록 더 앞에 위치하여 다른 요소를 가립니다.
다음과 같은 요소에 사용합니다.
positioned layout의 요소와 그 자식flex나grid아이템
일반 flow layout 요소에 사용하면 아무런 효과가 없습니다.
기본적인 쌓임 순서(stacking order)
z-index 가 사용되지 않은 기본 상태에서, 요소는 다음 순서대로 쌓입니다.
- 루트 요소
non-positioned인 자식 요소들positioned인 자식 요소들
그리고 공통 규칙으로 다음이 있습니다.
- html 에서 나중에 나온 요소가 위에 쌓임
(자식 요소가 부모 위에, 나중 번째의 형제 요소가 첫 번째 형제 요소 위에)
그래서 positioned 요소는 항상 그렇지 않은 요소보다 위에 그려집니다.
positioned 인 요소끼리는 html 순서에 따라 그려집니다.
z-index 로 쌓임 순서 바꾸기
기본 쌓임 순서를 바꾸고 싶다면 positioned 요소로 만들어 z-index 를 바꿉니다.
positioned 요소에서 사용된 z-index 는 다음과 같은 의미를 가집니다.
- 그 쌓임 맥락에서의 쌓임 순서
- 이 요소는 지역 쌓임 맥락을 형성함
이 지역 쌓임 맥락은 z-index 가 자신의 쌓임 맥락에서만 동작하게 됨을 의미합니다.
지역 쌓임 맥락을 형성한 부모의 자식은 그 지역의 쌓임 맥락에 위치하게 됩니다.
<div id="div1">
<div id="div2">
</div>
</div>
<div id="div3">
<div id="div4">
</div>
</div>여기 div1234 가 있습니다.
div1 과 div3 에 z-index 를 사용해서, 각각 1과 3이라는 값을 지정합니다.
그러면 div3 이 div1 보다 위에 오겠죠?
근데 이것뿐만이 아닙니다.
중요한 건 div1 과 div3 이 새로운 지역 쌓임 맥락을 형성해서,
div2 와 div4 가 그 안에 들어갔다는겁니다.
div1 과 div3 이 도화지이고 div2 와 div4 가 색종이가 된 것이죠.
그런데, div3 이란 도화지는 div1 보다 위에 있습니다.
그래서 div2 에 z-index 를 999999... 를 주더라도 div1 의 맥락에 있는 한
div4의 위에 쌓일 수 없습니다.
div4 의 z-index 가 훨씬 더 작은 값이어도요.
