Положение элемента по оси Z

z-index sm md lg xl xxl

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

Пример

Перекрывающиеся поверхности делают порядок слоёв заметным: элемент с большим значением располагается выше.

<div class="wrap w-full flex flex-col gap-1">
  <div class="w-full flex flex-col gap-1">
    <div class="sf-text-1/2 weight-6 text-center"><code>z-2</code>, <code>z-1</code>, <code>z-0</code> и <code>z--1</code></div>
    <div
      class="m-0 relative bg-surface-0 border border-outline-variant radius-3 p-3 h-f9"
    >
      <div
        class="bg-tertiary color-on-tertiary p-2 radius-2 absolute inline-start-0 top-2/12 bottom-0 inline-end-0 z-1"
        aria-label="z-1"
      >
        z-1
      </div>
      <div
        class="bg-success color-on-success p-2 radius-2 absolute inline-start-0 top-4/12 bottom-0 inline-end-0 z-2"
        aria-label="z-2"
      >
        z-2
      </div>
      <div
        class="bg-primary color-on-primary p-2 radius-2 absolute inline-start-auto inset-0 inline-end-auto z-0"
        aria-label="z-0"
      >
        z-0
      </div>
      <div
        class="bg-warning color-on-warning p-2 radius-2 h-e2 flex flex-col content-main-end top-11/12 absolute inline-start-0 inline-end-0 z--1"
        aria-label="z--1"
      >
        z--1
      </div>
    </div>
  </div>
</div>

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

Синтаксис

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

• Условие действия (необязательный параметр): Может принимать значения:

  • sm — для экранов шириной от 32rem и больше
  • md — для экранов шириной от 44rem и больше
  • lg — для экранов шириной от 60rem и больше
  • xl — для экранов шириной от 72rem и больше
  • xxl — для экранов шириной от 80rem и больше

  Если условие действия не указано, модификатор применяется ко всем размерам.

• Модификатор (обязательный параметр):

  • 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

Пример

<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>

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

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

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

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