Posizionamento assoluto

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

In CSS, il posizionamento assoluto ti permette di collocare un elemento esattamente dove vuoi all'interno del suo contenitore.

Quando imposti position: absolute;, l’elemento viene rimosso dal layout normale, quindi gli altri elementi si comportano come se non ci fosse. Si posiziona in base all’antenato più vicino con una posizione impostata (diversa da static). Se non ce n’è uno, si posiziona rispetto alla pagina.

Ecco la sintassi di base per usare il posizionamento assoluto:

.parent {
    position: relative; /* Rendi il parent un antenato posizionato */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: Il selettore CSS che seleziona l'elemento genitore. Impostare position: relative; consente ai figli posizionati in modo assoluto.

.child: Il selettore CSS che individua l’elemento che vuoi posizionare in modo assoluto.

position: absolute;: Questa dichiarazione imposta il posizionamento dell'elemento su assoluto, rimuovendolo dal flusso normale.

top, right, bottom, left: queste proprietà specificano la posizione dell'elemento rispetto al suo antenato posizionato più vicino. Puoi usare valori positivi o negativi, specificati in pixel (px), em (em), percentuali (%) o altre unità CSS valide.

Per esempio:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

In questo esempio, l'elemento .parent è impostato come antenato posizionato con position: relative;. L'elemento .child è posizionato in modo assoluto con position: absolute; e la sua posizione è impostata a 50 pixel dall'alto e 100 pixel da sinistra rispetto al suo antenato posizionato più vicino (l'elemento .parent).

Sfida

Facile

Ti viene fornito un documento HTML con un elemento contenitore (<div>) che contiene due elementi figli (<div>) con le classi box1 e box2. Il tuo compito è usare il posizionamento assoluto per posizionare l'elemento box2 all'interno di parent. Segui i passaggi riportati di seguito:

Scrivi una regola CSS che selezioni l'elemento <div> con la classe parent. Imposta la sua proprietà position su relative per renderlo un antenato posizionato.
Scrivi una regola CSS che selezioni l'elemento <div> con la classe box2.
Imposta la proprietà position dell'elemento .box2 su absolute.
Imposta la proprietà top dell'elemento .box2 su 30px e la proprietà right su 20px. In questo modo, il riquadro verrà posizionato a 30 pixel dall'alto e a 20 pixel da destra rispetto al suo antenato posizionato (parent).

Provalo tu

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>