Z-색인 및 스택 컨텍스트

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에 auto의 z-index에 대한 초깃값이 있는 한, .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-색인 이해하기

이해도 확인

Z-색인에 대한 지식 테스트

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>