Layout CSS - La proprietà z-index
La z-indexproprietà specifica l'ordine di stack di un elemento.
La proprietà z-index
Quando gli elementi sono posizionati, possono sovrapporsi ad altri elementi.
La z-indexproprietà specifica l'ordine di stack di un elemento (quale elemento deve essere posizionato davanti o dietro gli altri).
Un elemento può avere un ordine di stack positivo o negativo:
Questa è una voce
Poiché l'immagine ha uno z-index di -1, verrà posizionata dietro il testo.
Esempio
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Nota: z-index funziona solo su elementi posizionati (posizione: assoluta, posizione: relativa, posizione: fissa o posizione: appiccicosa) e elementi flessibili
(elementi che sono figli diretti della visualizzazione: elementi flessibili).
Un altro esempio di z-index
Esempio
Qui vediamo che un elemento con un ordine di stack maggiore è sempre al di sopra di un elemento con un ordine di stack inferiore:
<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>
Senza z-indice
Se due elementi posizionati si sovrappongono senza uno z-index
specificato, l'ultimo elemento definito nel codice HTML verrà mostrato in alto.
Esempio
Stesso esempio di sopra, ma qui 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>
Proprietà CSS
| Property | Description |
|---|---|
| z-index | Sets the stack order of an element |