Для чего нужен Z-index

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

Пример:

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

Важно:

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