Как заставить элемент уйти на задний план?
Продвинутые темы
Элемент уводят на задний план через `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.