Положение элемента по оси Z
z-index
sm
md
lg
xl
В SIMAI Framework с помощью модификатора можно управлять положением элемента по оси Z.
Классы
| Класс | Значение |
|---|---|
z-0 |
z-index: var(--sf-z-index--0);
|
z-1 |
z-index: var(--sf-z-index--1);
|
z-2 |
z-index: var(--sf-z-index--2);
|
z-3 |
z-index: var(--sf-z-index--3);
|
z-4 |
z-index: var(--sf-z-index--4);
|
z-5 |
z-index: var(--sf-z-index--5);
|
z-6 |
z-index: var(--sf-z-index--6);
|
z-7 |
z-index: var(--sf-z-index--7);
|
z-8 |
z-index: var(--sf-z-index--8);
|
z-9 |
z-index: var(--sf-z-index--9);
|
z-auto |
z-index: auto;
|
Описание
Адаптивный модификатор. Позволяет управлять положением элемента по оси Z, в зависимости от размера области просмотра.
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
z-{1...9}- устанавливает z-index от 10 до 90;z-0- устанавливает z-index равным 0;z-auto- устанавливает как у родительского элемента.
Пример
5
4
3
2
1
<div class="z-5 ...">5</div>
<div class="z-4 ...">4</div>
<div class="z-3 ...">3</div>
<div class="z-2 ...">2</div>
<div class="z-1 ...">1</div>
Адаптивность
Для управления положением элемента по оси Z, начиная с определенного размера области просмотра, добавьте к модификатору префикс контрольной точки (sm, md, lg, xl) через двоеточие (:).
Например, используйте модификатор md:z-1 для установки z-индекса равному 10 для экранов размером Medium и больше.
<div class="md:z-1"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.