Как работает Z-index

Z-index управляет порядком наложения элементов на странице. Работает только для элементов с позиционированием (position: relative/absolute/fixed/sticky).

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

Важные нюансы:

1. Z-index работает в пределах одного контекста наложения (stacking context)
2. Контекст создают: position, opacity < 1, transform, filter и др.
3. Элементы внутри одного контекста сравниваются между собой, но не с элементами из другого контекста

.parent {
  position: relative;
  z-index: 1; /* Создаёт контекст */
}

.child {
  position: absolute;
  z-index: 10; /* Работает только внутри parent */
}