Za co odpowiada właściwość z-index w CSS?

Właściwość z-index w CSS kontroluje kolejność nakładania się elementów po osi Z. Elementy z większą wartością z-index są umieszczane nad elementami z mniejszą wartością.

Kluczowe punkty:

• Dotyczy tylko elementów pozycjonowanych (position: relative, absolute, fixed, sticky).
• Wartość może być liczbą (dodatnią, ujemną lub zerem).
• Wartość automatyczna (auto) odpowiada kolejności w drzewie DOM.
• Ujemne wartości z-index mogą umieścić element pod elementem nadrzędnym i jego zawartością.
• z-index tworzy kontekst nakładania (stacking context). Elementy w tym samym kontekście są sortowane według z-index, ale cały kontekst zachowuje się jak jedna jednostka względem innych kontekstów.

Domyślny porządek nakładania (bez z-index):

1. Tło i obramowania elementu głównego.
2. Pozycjonowane elementy z ujemnym z-index.
3. Elementy blokowe w normalnym przepływie.
4. Elementy pływające (float).
5. Elementy inline w normalnym przepływie.
6. Pozycjonowane elementy z z-index: auto lub z-index: 0.
7. Pozycjonowane elementy z dodatnim z-index.

Przykład:

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

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Nad niebieskim */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Pod czerwonym */
}

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

W tym przypadku, czerwony blok (z-index: 1) będzie nad niebieskim (z-index: 0).