Pentru ce este responsabilă proprietatea z-index în CSS?

Proprietatea z-index în CSS controlează ordinea de suprapunere a elementelor poziționate de-a lungul axei Z. Elementele cu o valoare mai mare a z-index sunt plasate deasupra celor cu o valoare mai mică.

Puncte cheie:

• Se aplică doar elementelor poziționate (position: relative, absolute, fixed, sticky).
• Valoarea poate fi un număr (pozitiv, negativ sau zero).
• Valoarea automată (auto) corespunde ordinii în arborele DOM.
• Valorile negative ale z-index pot plasa un element sub elementul părinte și conținutul său.
• z-index creează un context de suprapunere (stacking context). Elementele din același context sunt ordonate după z-index, dar întregul context se comportă ca o unitate față de alte contexte.

Ordinea de suprapunere implicită (fără z-index):

1. Fundalul și marginile elementului rădăcină.
2. Elementele poziționate cu z-index negativ.
3. Elementele bloc în flux normal.
4. Elementele flotante (float).
5. Elementele inline în flux normal.
6. Elementele poziționate cu z-index: auto sau z-index: 0.
7. Elementele poziționate cu z-index pozitiv.

Exemplu:

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

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

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Sub roșu */
}

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

În acest caz, blocul roșu (z-index: 1) va fi deasupra blocului albastru (z-index: 0).