Proprietatea z-index

Proprietatea z-index stabilește care element va fi deasupra în cazul în care mai multe elemente se suprapun unul peste altul.

Sintaxă

cssselector {
  z-index: număr | auto;
}

Numărul trebuie să fie întreg, pozitiv sau negativ. Poate fi zero.

Valori

Valoare	Descriere
Număr	Numărul întreg stabilește ordinea de suprapunere a elementelor: la suprapunerea elementelor unul peste altul, deasupra va fi acela al cărui `z-index` este mai mare.
`auto`	Ordinea de suprapunere este construită automat: deasupra va fi acel element care este poziționat mai jos în codul HTML.

Valoarea implicită: auto.

Exemplu

În acest exemplu, blocurile se vor suprapune unul peste altul în ordinea în care apar în codul HTML (z-index nu este setat și va avea valoarea implicită - auto). Primul bloc va fi în fundal (roșu), iar ultimul - deasupra tuturor (verde):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
}

Результат:

Exemplu

Să schimbăm ordinea de suprapunere, setând z-index. Blocului roșu - 3, blocului albastru - 2, blocului verde - 1. Ordinea de suprapunere se va schimba în ordinea inversă (deasupra tuturor va fi blocul cu z-index 3):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
  z-index: 3;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
  z-index: 2;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
  z-index: 1;
}

Результат: