쌓임 순서

쌓임 순서 (Z-Index)

요소의 쌓임 순서(stack order), 즉 3차원적인 위치를 정해주는 유틸리티예요. 요소가 표시된 순서와 관계없이 쌓임 우선순위를 제어할 수 있어요.

출처: 문서

z-<number> z-index: <number>;

z-auto z-index: auto;

z-[<value>] z-index: <value>;

z-(<custom-property>) z-index: var(<custom-property>);

z-10, z-50 같은 z-<number> 유틸리티를 사용하면 표시된 순서와 관계없이 요소의 쌓임 순서(3차원적인 위치)를 제어할 수 있어요.

<div class="z-40 ...">05</div><div class="z-30 ...">04</div><div class="z-20 ...">03</div><div class="z-10 ...">02</div><div class="z-0 ...">01</div>

음수 z-index 값을 사용하려면 클래스 이름 앞에 하이픈(-)을 붙여 음수로 변환하면 돼요.

<div class="...">05</div><div class="...">04</div><div class="-z-10 ...">03</div><div class="...">02</div><div class="...">01</div>

z-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 쌓임 순서를 설정할 수 있어요.

<div class="z-[calc(var(--index)+1)] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 z-(<custom-property>) 문법을 사용할 수도 있어요.

<div class="z-(--my-z) ...">
  <!-- ... -->
</div>

이것은 z-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

z-index 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="z-0 md:z-50 ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.