Макет
Утилиты для управления порядком наложения элемента.
| 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-<number> такие как z-10 и z-50 для управления порядком наложения (или трехмерным позиционированием) элемента, независимо от порядка, в котором он был отображен:
<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>Подробнее об использовании вариантов читайте в документации по вариантам.