За какво отговаря свойството z-index в CSS?

Свойството z-index в CSS контролира реда на слоевете на позиционираните елементи по ос Y. Елементите с по-голяма стойност на z-index се поставят върху тези с по-малка.

Ключови точки:

• Влиза само за позиционирани елементи (position: relative, absolute, fixed, sticky).
• Стойността може да бъде число (положително, отрицателно или нула).
• Автоматичната стойност (auto) съответства на реда в DOM дървото.
• Отрицателните стойности на z-index могат да поставят елемента под родителския елемент и неговото съдържание.
• z-index създава контекст на наслагване (stacking context). Елементите в един и същи контекст се подреждат по z-index, но целият контекст се държи като една единица спрямо други контексти.

Стандартен ред на наслагване (без z-index):

1. Фон и рамки на кореновия елемент.
2. Позиционирани елементи с отрицателен z-index.
3. Блокови елементи в нормалния поток.
4. Плаващи елементи (float).
5. Inline елементи в нормалния поток.
6. Позиционирани елементи с z-index: auto или z-index: 0.
7. Положителни z-index-и.

Пример:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Над синьото */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Под червеното */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

В този случай, червеният блок (z-index: 1) ще бъде над синьото (z-index: 0).