z-index

z-index

엘리먼트의 스택 순서를 제어하는 유틸리티입니다.

Class Styles

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>] 구문을 사용하세요 stack order를 완전히 커스텀한 값으로 설정하려면:

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

CSS 변수를 사용하려면 z-(<custom-property>) 구문을 사용할 수도 있습니다:

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

이는 z-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

접두사 a z-index 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

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

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.