Положение элемента по оси Z (z-index)link

https://dev.ru.simai.io/ru/ui/utility/layout/z-index.php

Вы можете управлять положением элемента по оси Z, используя модификаторы z-index. Значения z-index задаются через переменные, что позволяет гибко настраивать слойность элементов.

Переменные z-indexlink

Переменная	Значение
`--sf-z-index--1`	-1
`--sf-z-index-0`	0
`--sf-z-index-1`	10
`--sf-z-index-2`	20
`--sf-z-index-3`	30
`--sf-z-index-4`	40
`--sf-z-index-5`	50
`--sf-z-index-6`	60
`--sf-z-index-7`	70
`--sf-z-index-8`	80
`--sf-z-index-9`	90

Синтаксисlink

Использование: {условие действия}:{модификатор}

Условие действия (необязательный параметр):
Может принимать значения:
- sm — для экранов шириной от 540px и больше
- md — для экранов шириной от 768px и больше
- lg — для экранов шириной от 960px и больше
- xl — для экранов шириной от 1140px и больше
- xxl — для экранов шириной от 1320px и больше
Если условие действия не указано, модификатор применяется ко всем размерам.
Модификатор (обязательный параметр):
- z--1 — устанавливает z-index: var(--sf-z-index--1) (-1)
- z-0 — устанавливает z-index: var(--sf-z-index-0) (0)
- z-1 — устанавливает z-index: var(--sf-z-index-1) (10)
- z-2 — устанавливает z-index: var(--sf-z-index-2) (20)
- z-3 — устанавливает z-index: var(--sf-z-index-3) (30)
- z-4 — устанавливает z-index: var(--sf-z-index-4) (40)
- z-5 — устанавливает z-index: var(--sf-z-index-5) (50)
- z-6 — устанавливает z-index: var(--sf-z-index-6) (60)
- z-7 — устанавливает z-index: var(--sf-z-index-7) (70)
- z-8 — устанавливает z-index: var(--sf-z-index-8) (80)
- z-9 — устанавливает z-index: var(--sf-z-index-9) (90)
- z-auto — устанавливает z-index: auto

Примерlink

<div class="z-5 ...">Элемент с z-index:50</div>
<div class="z-4 ...">Элемент с z-index:40</div>
<div class="z-3 ...">Элемент с z-index:30</div>
<div class="z-2 ...">Элемент с z-index:20</div>
<div class="z-1 ...">Элемент с z-index:10</div>

Адаптивностьlink

Для применения стилей, начиная с определённой контрольной точки, добавьте префикс (sm:, md:, lg:, xl:, xxl:) к модификатору.

Например, чтобы установить z-index:10 только для экранов среднего размера и больше:

<div class="md:z-1">Элемент со z-index:10 на больших экранах</div>