CSS z-index
La proprietà CSS z-index (CSS2) controlla l’ordine di sovrapposizione degli elementi
La proprietà z-index definisce l’ordine di impilamento degli elementi posizionati (con position diverso da static), determinando quali elementi appaiono sopra o sotto gli altri in caso di sovrapposizione.
Sintassi
Significato dei valori principali:
numero intero: Un valore intero (positivo, negativo o zero) che indica la posizione dello strato dell’elemento rispetto agli altri. Valori più alti appaiono sopra valori più bassi.
auto: Valore predefinito, l’elemento segue l’ordine naturale nel contesto di impilamento.
inherit: L’elemento eredita il valore di
z-indexdal suo elemento genitore.
Esempio proprietà: z-index
Codice Esempio: z-index
.box {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
opacity: 0.8;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
border-radius: 8px;
}.box1 {
background-color: #e74c3c;
z-index: 1;
top: 50px;
left: 50px;
}.box2 {
background-color: #3498db;
z-index: 3;
top: 100px;
left: 100px;
}.box3 {
background-color: #27ae60;
z-index: 2;
top: 150px;
left: 150px;
}
Contenuto Esempio: z-index
Esempio di utilizzo di z-index
In questo esempio, tre elementi posizionati con diversi valori di z-index si sovrappongono in base al valore impostato:
CSS e HTML per l'esempio di z-index:
<style>
.box {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
opacity: 0.8;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
border-radius: 8px;
}
.box1 {
background-color: #e74c3c;
z-index: 1;
top: 50px;
left: 50px;
}
.box2 {
background-color: #3498db;
z-index: 3;
top: 100px;
left: 100px;
}
.box3 {
background-color: #27ae60;
z-index: 2;
top: 150px;
left: 150px;
}
</style>
<div class="box box1">z-index: 1</div>
<div class="box box2">z-index: 3</div>
<div class="box box3">z-index: 2</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
