Czym jest z-index i jak jest używany w tworzeniu stron internetowych?

z-index — to właściwość CSS, która określa kolejność nakładania (stacking) elementów w zależności od ich położenia na osi Z. Elementy z większymi wartościami z-index są wyświetlane nad elementami z mniejszymi wartościami.

Służy do zarządzania głębokością nakładania elementów z pozycjonowaniem (czyli elementów, których właściwość position ma wartości inne niż static): relative, absolute, fixed, sticky.

Kluczowe punkty użycia:

• Elementy z pozycjonowaniem statycznym (position: static;) nie uczestniczą w kontekście nakładania i ignorują z-index.
• Wartość z-index dotyczy tylko elementów tworzących nowy kontekst nakładania. Taki kontekst jest tworzony np. przy użyciu position z wartościami innymi niż static, lub przy zastosowaniu innych reguł CSS (np. opacity < 1).
• W ramach tego samego kontekstu nakładania, elementy z wyższym z-index są wyświetlane powyżej.
• Zagnieżdżone konteksty nakładania nakładają się jako jedna całość w ramach kontekstu nadrzędnego.
• Bez wyraźnego ustawienia z-index, kolejność nakładania jest określana przez kolejność elementów w DOM.

Przykład użycia:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Będzie wyżej niż .box2 */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* Będzie niżej niż .box1 */
}