Как заставить элемент всегда быть выше остальных?

Элемент делают выше остальных через `z-index` (для позиционированных элементов) — чем больше значение, тем выше в стеке наложения. Требуется `position` не `static`.

z-index + position

z-index работает у элементов с position (relative, absolute, fixed, sticky), а также у flex- и grid-элементов:

.on-top {
  position: relative; /* или absolute/fixed */
  z-index: 999;       /* выше элементов с меньшим z-index */
}

Чем больше z-index, тем выше элемент в порядке наложения (перекрывает элементы с меньшим значением).

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

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

.parent {
  position: relative;
  z-index: 1;        /* создаёт контекст наложения */
  /* дети сравниваются внутри него */
}

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

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

Элемент с z-index: 9999 всё равно под другим, потому что его родитель в контексте с меньшим z-index. Решение — поднять родителя или использовать порталы (рендер в body, вне ограничивающего контекста).

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

Без z-index порядок определяется: позиционированные элементы выше статических, при равенстве — позже в DOM выше.

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

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