Nozioni base di z-index

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 59 di 76.

In CSS, la proprietà z-index controlla l'ordine di sovrapposizione degli elementi posizionati (elementi con una posizione diversa da static). Quando gli elementi si sovrappongono, z-index determina quale elemento appare sopra e quale appare dietro. Gli elementi con un valore z-index più alto vengono sovrapposti davanti agli elementi con un valore più basso.

Ecco la sintassi di base per usare la proprietà z-index:

selector {
    position: relative; /* o absolute, fixed o sticky */
    z-index: value;
}

position: relative; (o absolute, fixed o sticky): l'elemento deve essere posizionato affinché z-index abbia effetto.

value: un valore intero che rappresenta l’ordine di sovrapposizione. Gli elementi con valori più alti si sovrappongono agli elementi con valori più bassi. Il valore può essere positivo, negativo o zero.

Per esempio:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

In questo esempio, sia .box1 che .box2 sono posizionati in modo assoluto. Poiché .box1 ha un valore di z-index più alto, verrà impilato davanti a .box2 quando si sovrappongono.

Sfida

Facile

Ti viene fornito un documento HTML con tre elementi (<div>) sovrapposti, con le classi box1, box2 e box3. Il tuo compito è usare la proprietà z-index per controllare l'ordine di sovrapposizione di questi elementi. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <div> con la classe box1. Imposta la proprietà position su absolute, top su 0, left su 0 e z-index su 3.
Scrivi una regola CSS che selezioni l'elemento <div> con la classe box2. Imposta la proprietà position su absolute, top su 20px, left su 20px e z-index su 2.
Scrivi una regola CSS che selezioni l'elemento <div> con la classe box3. Imposta la proprietà position su absolute, top su 40px, left su 40px e z-index su 1.

Osserva come i valori di z-index influenzano l'ordine di sovrapposizione dei riquadri, con box1 in cima e box3 in fondo.

Provalo tu

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>