PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

Как заставить элемент уйти на задний план?

Продвинутые темы

Элемент уводят на задний план через `z-index` с меньшим (в т. ч. отрицательным) значением при `position` не `static`.

Основной способ — z-index

.back {
  position: relative; /* обязательно позиционирование */
  z-index: -1;        /* уводит за другие элементы */
}

Меньший z-index (включая отрицательный) помещает элемент под другими элементами.

Отрицательный z-index

.background-decoration {
  position: absolute;
  z-index: -1; /* уйдёт под контент родителя */
}

Полезно для декоративных фонов за контентом.

Нюанс с контекстом наложения

z-index: -1 уводит элемент за других внутри своего контекста наложения, но он может оказаться под фоном родителя, если родитель создаёт контекст. Иногда элемент «проваливается» под родителя — учитывать stacking context.

Порядок без z-index

Без z-index:

  • Статические/более ранние в DOM элементы — ниже.
  • Позиционированные и более поздние — выше.

Чтобы увести назад без z-index — разместить раньше в DOM (но это ненадёжно).

Динамически (JS)

element.style.zIndex = '-1';

Коротко для собеседования

Элемент уводят на задний план через z-index с меньшим/отрицательным значением (z-index: -1) при position не static — полезно для декоративных фонов. Учитывать контекст наложения: элемент уходит за других внутри своего контекста, но может «провалиться» под фон родителя. Без z-index порядок задаётся позицией в DOM.

Другие вопросы раздела