Что такое z-index

z-index — это CSS-свойство, которое контролирует порядок наложения элементов вдоль оси Z (глубины). Чем выше значение z-index, тем ближе элемент к пользователю. Работает только для позиционированных элементах (position: absolute, relative, fixed, sticky).

Пример:

.box1 {
  position: absolute;
  z-index: 2; /* Будет поверх box2 */
}
.box2 {
  position: absolute;
  z-index: 1;
}

Нюансы:

• Контекст стека: z-index работает в пределах одного контекста (например, внутри родителя с position).
• Отрицательные значения допустимы (элемент уходит под фон).
• По умолчанию z-index: auto (эквивалентно 0, но не создаёт контекст).