Blog
Programmazione
CSS
CSS3 - Layout - La proprietà z-index

CSS3 - Layout - La proprietà z-index

La proprietà z-index specifica l'ordine di stack di un elemento.

La proprietà z-index

Quando si posizionano gli elementi, questi posso sovrapporsi gli uni gli altri.

La proprietà z-index specifica l'ordine di impilamento (stack) di un elemento (quale elemento deve essere posizionato frontalmente o dietro gli altri).

Un elemento può avere un ordine positivo o negativo di stack.

Esempio

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Visualizza esempio

Nota: z-index funziona solo su elementi posizionati (position: absolute; position: relative; position: fixed; o position: sticky; e su elementi flex (elemento che sono discendenti diretti di elementi con display: flex;).

Un altro esempio z-index

Qui vediamo che un elemento con un ordine di stack più alto sono sempre sopra un elemento con un ordine di stack più basso:

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

Visualizza esempio

Senza z-index

Se due elementi posizionati si sovrappongono l'un l'altro senza z-index specificato, l'elemento definito per ultimo nel codice HTML sarà mostrato in cima.

Esempio

Stesso esempio precedente, ma senza z-index specificato:

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

Visualizza esempio