Что такое Z-индекс

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

Пример:

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

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

• Z-индекс работает в пределах одного контекста наложения (stacking context)
• По умолчанию все элементы имеют z-index: auto (эквивалентно 0)
• Отрицательные значения допустимы (элемент уходит под родителя)
• Не влияет на статически позиционированные элементы (position: static)