CSS 팟캐스트 - 019: Z-색인 및 컨텍스트 스태킹
절대적으로 배치된 몇 개의 요소가 있고 서로 위에 배치되어야 한다고 가정해 보겠습니다. 다음과 같이 HTML을 작성할 수 있습니다.
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
하지만 기본적으로 어떤 것이 다른 것의 위에 놓일까요? 어떤 항목이 이를 실행하는지 파악하려면 Z-색인과 컨텍스트 스태킹을 이해해야 합니다.
Z-색인
z-index 속성은 브라우저의 3D 공간(Z축)을 기반으로 HTML의 레이어 순서를 명시적으로 설정합니다.
이 축은 사용자와 더 가까운 레이어와 더 가까운 레이어를 표시합니다.
웹 상의 세로축은 Y축이고 가로축은 X축입니다.
z-index 속성은 양수 또는 음수일 수 있는 숫자 값을 허용합니다.
z-index 값이 더 큰 요소는 다른 요소 위에 표시됩니다.
요소에 z-index이 설정되지 않은 경우 기본 동작은 문서 소스 순서가 Z축을 지정하는 것입니다.
즉, 문서에서 아래쪽에 있는 요소가 그 앞에 표시되는 요소 위에 놓입니다.
일반적인 흐름에서 z-index에 특정 값을 설정했는데 작동하지 않는 경우 요소의 position 값을 static가 아닌 값으로 설정해야 합니다.
사람들이 z-index 문제로 어려움을 겪는 흔한 위치입니다.
그러나 Flexbox 또는 그리드 컨텍스트에서는 그렇지 않습니다. position: relative를 추가하지 않고도 플렉스 또는 그리드 항목의 Z-색인을 수정할 수 있기 때문입니다.
음수 Z-색인
요소를 다른 요소 뒤에 설정하려면 z-index에 음수 값을 추가합니다.
.my-element {
background: rgb(232 240 254 / 0.4);
}
.my-element .child {
position: relative;
z-index: -1;
}
.my-element에 z-index의 초깃값이 auto인 한 .child 요소가 그 뒤에 배치됩니다.
다음 CSS를 .my-element에 추가하면 .child 요소가 그 뒤에 있지 않습니다.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
이제 .my-element에 static가 아닌 position 값과 auto가 아닌 z-index 값이 있으므로 새로운 스택 컨텍스트가 생성되었습니다.
즉, .child의 z-index를 -999로 설정해도 여전히 .my-parent 뒤에 있지 않습니다.
컨텍스트 스태킹
스택 컨텍스트는 공통 상위 요소를 가지고 z축을 따라 위아래로 함께 이동하는 요소 그룹입니다.
이 예에서 첫 번째 상위 요소의 z-index은 1이므로 새 스태킹 컨텍스트를 만듭니다.
하위 요소의 z-index이 999입니다.
이 상위 요소 옆에는 하나의 하위 요소를 가진 다른 상위 요소가 있습니다.
상위 요소의 z-index은 2이고 하위 요소의 z-index도 2입니다.
두 상위 요소가 모두 스택 컨텍스트를 생성하므로 모든 하위 요소의 z-index는 상위 요소의 컨텍스트에 기반합니다.
스태킹 컨텍스트 내 요소의 z-index은 항상 자체 스택 컨텍스트 내 상위 요소의 현재 순서를 기준으로 합니다.
스택 컨텍스트 만들기
새 스택 컨텍스트를 만들기 위해 z-index 및 position를 적용할 필요가 없습니다.
opacity, will-change, transform 등 새로운 복합 레이어를 만드는 속성 값을 추가하여 새 스택 컨텍스트를 만들 수 있습니다.
여기에서 전체 속성 목록을 확인할 수 있습니다.
합성 레이어가 무엇인지 설명하기 위해 웹페이지를 캔버스라고 가정해 보겠습니다. 브라우저는 HTML 및 CSS를 사용하여 캔버스를 만들 크기를 계산합니다. 그런 다음 이 캔버스에 페이지를 칠합니다. 예를 들어 요소의 위치를 변경하는 등 요소를 변경하면 브라우저는 뒤로 돌아가 페인트할 항목을 다시 작업해야 합니다.
성능 향상을 위해 브라우저에서는 캔버스 위에 레이어로 배치되는 새 합성 레이어를 만듭니다.
포스트잇 메모와 약간 비슷합니다. 하나를 이동하거나 변경해도 전체 캔버스에 큰 영향을 미치지 않습니다.
opacity, transform, will-change이 있는 요소는 변경될 가능성이 매우 높으므로 새 합성 레이어가 생성됩니다. 따라서 브라우저는 GPU를 사용하여 스타일 조정을 적용하여 변경사항이 최대한 높은 성능을 발휘하도록 합니다.
자료
학습 내용 확인하기
Z-색인에 대한 지식 테스트
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
어떤 도움말이 기본적으로 상단에 표시되나요?
Z-색인이 작동하지 않는 경우 요소에서 어떤 속성을 검사해야 하나요?
displayrelativepositionstatic 이외의 값으로 설정되어 있는지 확인합니다.animationFlexbox 및 그리드에 position: relative가 필요한가요?
position: relative 없이 작동합니다.