CSS에는 z-index라는 속성이 있는데 이는 아이템의 z축 순서를 지정하여 더 큰 z-index 값을 가진 요소가 작은 값의 요소를 덮는다. 일단 z-index가 어떤 순서로 요소들을 덮는지 알아보기 전에 z-index 속성이 지정되지 않은 요소들 사이에서는 순서가 어떻게 되는 지부터 알아봐야 할 것 같다.
1. z-index
🌈 z-index가 없는 경우
MDN에 따르면 다음과 같은 순서로 아래에서부터 요소들이 쌓이기 시작한다고 한다.
- 뿌리 엘리먼트의 배경과 테두리
- 자식 엘리먼트들은 HTML에서 등장하는 순서대로
position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로
즉, 가장 아래에 부모 요소가 쌓이고, 그 위에 자식 엘리먼트들이 쌓인다. 이 때 같은 부모를 가진 자식 엘리먼트들 사이에서는 HTML 문서에서 등장하는 순서대로 아래에 깔리고 그 위에는 position이 지정된 자식 엘리먼트가 깔린다.
🌈 z-index가 있는 경우
위와 같이 쌓이는 규칙에서 벗어나 임의로 쌓임 순서를 정하고 싶다면 z-index라는 속성을 이용하면 된다. z-index란 어떤 요소에 z-index:값 형태처럼 지정하여 z-index 값에 따라 정렬하여 가장 높은 값이 가장 위(사용자의 눈으로부터 가까운 쪽)에 오도록 한다.
그러나 주의해야 할 점이 있는데 z-index를 사용하기 위해서는 position속성을 지정해줘야 한다. 즉, 엘리먼트의 position을 static이 아닌 값으로 설정하고 z-index를 함께 사용해야 원하는 대로 쌓임 순서를 만들 수 있다.
z-index값을 음수로 지정할 수도 있는데 이렇게 지정된 요소는 부모보다 뒤에 위치한다. z-index의 기본 값은 0이기 때문이다. 따라서 부모보다 작은 수를 가지기 때문에 뒤에 위치하게 되는 것이다. 만약 부모의 z-index 값이 자식의 z-index값보다 더 작은 음수가 되면 다시 뒤에 위치한다.
🌈 쌓임 순서
z-index가 없는 경우와 z-index가 있는 경우의 순서들을 한번에 정리하면 아래와 같은 순서가 된다.
- 쌓임 맥락의 뿌리(root) 요소. (html요소)
- position 값이 있고 z-index 값이 음수인 요소(와 자식들). (z-index 값이 높은 요소가 앞에 놓인다. 값이 같으면 HTML에 나타난 순서에 따라 나타난다.)
- position 값이 없는 요소(HTML에서 나타나는 순서를 따른다).
- position 값이 있고 z-index 값이 auto인 요소(와 그 자식들). (HTML에서 나타나는 순서에 따라)
- position 값이 있고 z-index 값이 양수인 요소(와 그 자식들). (z-index 값이 높은 요소가 앞에 놓인다. 값이 같으면 HTML에 나타난 순서에 따라 나타난다.)
2. 쌓임 맥락
위의 쌓임 순서는 하나의 쌓임 맥락(stacking context)에서 존재하는 규칙이다. 만약 여러개의 쌓임 맥락이 겹친다면 각각의 쌓임 맥락에서 독립적으로 순서가 적용된다.
쌓임 맥락은 쌓임 순서가 적용되는 범위라고 생각할 수 있겠다. 각각의 쌓임 맥락은 독립적이라 어떤 쌓임 맥락을 포함하는 더 큰 쌓임 맥락이 존재한다고 하더라도 영향을 주지 않고 부모는 자식의 쌓임 맥락을 하나의 단위로 인식한다.
쌓임 맥락의 특징은 다음과 같다.
- 쌓임 맥락이 다른 쌓임 맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다.
- 쌓임 맥락은 형제 쌓임 맥락과 완전히 분리됩니다. 쌓임을 처리할 땐 자손 요소만 고려합니다.
- 각각의 쌓임 맥락은 독립적입니다. 어느 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째 부모 쌓임 맥락 안에 배치합니다.
쌓임 맥락은 다음 조건을 하나라도 만족하면 생성되는 맥락이다.
- 문서의 루트 요소.
position이absolute또는relative이고,z-index가auto가 아닌 요소.position이fixed또는sticky인 요소. (sticky는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)- 플렉스(
flexbox) 컨테이너의 자식 중z-index가auto가 아닌 요소.- 그리드(
grid) 컨테이너의 자식 중z-index가auto가 아닌 요소.opacity가 1보다 작은 요소.mix-blend-mode가normal이 아닌 요소.- 다음 속성 중 하나라도
none이 아닌 값을 가진 요소.
transformfilterperspectiveclip-pathmaskisolation이isolate인 요소.webkit-overflow-scrolling이touch인 요소.will-change의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.contain이layout,paint, 또는 둘 중 하나를 포함하는 값(strict,content등)인 요소.
이 많은 규칙 중에 자주 사용되는 쌓임 맥락 생성 조건은 이정도가 될 것 같다.
position이relative또는absolute이면서z-index가auto가 아닌 요소position이fixed또는sticky인 요소opacity가 1보다 작은 요소transform이none이 아닌 요소
🌈 살펴보기
<div>div #1</div>
<div>div #2</div>
<div>div #3
<div>div #4</div>
<div>div #5</div>
<div>div #6</div>
</div>위의 그림은 div #1, div #2, div #3이 하나의 쌓임 맥락안에 놓이는 동시에 각각의 쌓임 맥락을 만든다. 또, div #3, div #4, div #5, div #6 역시 하나의 쌓임 맥락안에 놓이는 동시에 각각의 쌓임 맥락을 만든다. 따라서 div #4의 z-index값이 div #1의 z-index 값보다 크더라도 자식 쌓임 맥락과 부모 쌓임 맥락은 독립적이기 때문에 아래에 위치하게 된다.
출처
