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

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

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

.front {
  position: relative; /* или absolute/fixed — обязательно */
  z-index: 100;       /* большое значение → передний план */
}

z-index требует позиционирования (не static) — исключение: flex- и grid-элементы; больше значение — ближе к пользователю (перекрывает элементы с меньшим z-index).

Контекст наложения (stacking context)

z-index действует внутри своего контекста наложения. Элемент не выйдет вперёд соседнего контекста, даже с большим z-index:

/* Если родитель в контексте с z-index: 1,
   ребёнок с z-index: 9999 не перекроет элемент из контекста с z-index: 2 */

Контекст создают: position + z-index, transform, opacity < 1, filter, will-change.

Частая проблема и решение

Элемент «не выходит вперёд», хотя z-index большой — из-за контекста родителя. Решения:

• Поднять z-index/убрать контекст у родителя.
• Порталы — рендерить элемент в body, вне ограничивающих контекстов (модалки, тултипы).

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

element.style.zIndex = '1000';

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

Элемент выводят на передний план через z-index (большое значение) при position не static. Нюанс — контекст наложения: z-index работает внутри него, элемент не перекроет соседний контекст (создаётся transform, opacity<1). Частая проблема — низкий контекст родителя; решают порталами (рендер в body) для модалок/тултипов.