Indexul Z în CSS: Ce este și ce face

Ce este un index Z?

Index Z (z-index) este o proprietate CSS care definește ordinea elementelor HTML suprapuse. Elementele cu un indice mai mare vor fi plasate deasupra elementelor cu un indice mai mic.

Notă: Indexul Z funcționează numai pe elementele poziționate (position:absolute, position:relative, sau position:fixed).

Valori posibile

/* Default value if not specified */
z-index: auto;

/* Integer values */
z-index: 1;
z-index: 100;
z-index: 9999;
z-index: -1;

/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;

Cum se utilizează indexul Z

În acest exemplu, puteți vedea trei casete afișate una peste alta în ordine diferite folosind z-index.

HTML

<div class="container">
  <div class="box" id="blue"></div>
  <div class="box" id="red"></div>
  <div class="box" id="green"></div>
</div>

CSS

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

De cand z-index nu a fost definit, va avea o valoare implicită de auto. Acesta este un rezultat:

Încercați să schimbați ordinea în verde, albastru, roșu în CSS folosind z-index.

#blue {
  background-color: blue;
  z-index: 2;
}

#red {
  background-color: red;
  z-index: 1;
}

#green {
  background-color: green;
  z-index: 3;
}

Rezultatul dvs. va fi:

Utilizați Indexul Z dacă trebuie să puneți un element de fundal sub un container. Puteți plasa cu ușurință fundalul sub fiecare element oferindu-i un index Z negativ, cum ar fi mai jos:

#background {
  z-index: -1;
}