Layout CSS - proprietà z-index

z-index proprietà specifica l'ordine di sovrapposizione dell'elemento.

proprietà z-index

Quando un elemento è posizionato, può sovrapporsi ad altri elementi.

z-index proprietà specifica l'ordine di sovrapposizione dell'elemento (quale elemento dovrebbe essere davanti e quale dietro).

l'ordine di sovrapposizione dell'elemento può essere un numero positivo o negativo:

Questo è un titolo

Perché l'immagine z-index è -1, quindi verrà posizionato dietro il testo.

esempio

img {
  posizione: assoluto;
  sinistro: 0px;
  alto: 0px;
  z-index: -1;
}

Prova da solo

Attenzione:z-index solo perelementi posizionati（posizione: assoluto、posizione: relativa、posizione: fisso o posizione: sticky）eprogetto elastico（display: flex elemento figlio diretto).

Un altro esempio di z-index

esempio

Qui vediamo che gli elementi con un ordine di sovrapposizione più alto sono sempre sopra quelli con un ordine di sovrapposizione più basso:

<html>
<head>
<style>
.container {
  posizione: relativa;
}
.black-box {
  posizione: relativa;
  z-index: 1;
  bordo: 2px solido nero;
  altezza: 100px;
  margine: 30px;
}
.gray-box {
  posizione: assoluto;
  z-index: 3;
  sfondo: lightgray;
  altezza: 60px;
  larghezza: 70%;
  sinistro: 50px;
  alto: 50px;
}
.green-box {
  posizione: assoluto;
  z-index: 2;
  sfondo: lightgreen;
  larghezza: 35%;
  sinistra: 270px;
  top: -15px;
  altezza: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Scatola nera</div>
  <div class="gray-box">Scatola grigia</div>
  <div class="green-box">Scatola verde</div>
</div>
</body>
</html>

Prova da solo

nessun z-index

Se due elementi posizionati non sono specificati z-index in caso di sovrapposizioneHTML codice di definizione finalel'elemento verrà visualizzato in superficie.

esempio

Come nell'esempio sopra, ma qui non è specificato z-index：

<html>
<head>
<style>
.container {
  posizione: relativa;
}
.black-box {
  posizione: relativa;
  bordo: 2px solido nero;
  altezza: 100px;
  margine: 30px;
}
.gray-box {
  posizione: assoluto;
  sfondo: lightgray;
  altezza: 60px;
  larghezza: 70%;
  sinistro: 50px;
  alto: 50px;
}
.green-box {
  posizione: assoluto;
  sfondo: lightgreen;
  larghezza: 35%;
  sinistra: 270px;
  top: -15px;
  altezza: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Scatola nera</div>
  <div class="gray-box">Scatola grigia</div>
  <div class="green-box">Scatola verde</div>
</div>
</body>
</html>

Prova da solo

Proprietà CSS

Proprietà Descrizione
z-index Impostare l'ordine di sovrapposizione degli elementi.