Как наложить один элемент поверх другого через z-index?

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

z-index работает только у позиционированных элементов — то есть с position: relative, absolute, fixed или sticky. У обычного static он просто игнорируется — отсюда «иногда не работает».

.overlay {
  position: fixed;   /* без position z-index бесполезен */
  inset: 0;
  z-index: 100;
}
.modal {
  position: relative;
  z-index: 101;       /* выше оверлея */
}

Вторая ловушка — контекст наложения (stacking context). Если родитель образует свой контекст (например, у него задан z-index, либо opacity меньше 1, либо transform), то z-index ребёнка считается только внутри этого родителя. Поэтому z-index: 9999 у вложенного элемента может проиграть соседнему блоку, чей родитель «выше». Лечится так: поднимайте z-index не у глубоко вложенного элемента, а у того предка, который участвует в общем порядке.

Практический совет: не лепите случайные 999/9999. Заведите шкалу (например, дропдаун 10, шапка 100, модалка 1000) — так конфликтов меньше и логика прозрачна.