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-색인에 대한 지식 테스트
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
어떤 문서가 기본적으로 맨 위에 표시되나요?
Z-색인이 작동하지 않는 경우 요소에서 어떤 속성을 검사해야 하나요?
animation
position
relative
display
Flexbox 및 그리드에 position: relative
가 필요한가요?