Ce este z-index și cum este utilizat în dezvoltarea web?

z-index — este o proprietate CSS care determină ordinea de suprapunere (stacking) a elementelor în funcție de poziția lor pe axa Z. Elementele cu valori mai mari de z-index sunt afișate deasupra celor cu valori mai mici.

Este utilizată pentru gestionarea adâncimii de suprapunere a elementelor cu poziționare (adică, elemente al căror position are valori diferite de static): relative, absolute, fixed, sticky.

Puncte cheie de utilizare:

• Elementele cu poziționare statică (position: static;) nu participă la contextul de suprapunere și ignoră z-index.
• Valoarea z-index se aplică doar elementelor care creează un nou context de suprapunere. Acest context este creat, de exemplu, prin utilizarea position cu valori diferite de static, sau prin aplicarea altor reguli CSS (cum ar fi opacity < 1).
• În cadrul aceluiași context de suprapunere, elementele cu un z-index mai mare sunt plasate deasupra.
• Contextele de suprapunere imbricate se suprapun ca o unitate unică în cadrul contextului părinte.
• Fără o atribuire explicită a z-index, ordinea de suprapunere este determinată de ordinea elementelor în DOM.

Exemplu de utilizare:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Deasupra lui .box2 */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* Sub .box1 */
}