Nozioni base sul posizionamento

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

In CSS, il posizionamento è un insieme di proprietà che ti permette di controllare la posizione degli elementi in una pagina web. Per impostazione predefinita, gli elementi vengono posizionati secondo il normale flusso del documento HTML. Tuttavia, con il posizionamento CSS, puoi estrarre gli elementi dal normale flusso e collocarli in posizioni specifiche rispetto al loro elemento contenitore o alla finestra di visualizzazione (l'area visibile della finestra del browser).

Ci sono diversi valori per la proprietà position, ognuno con un comportamento specifico:

static: Questo è il valore predefinito. L’elemento viene posizionato secondo il flusso normale del documento. Le proprietà top, right, bottom e left non hanno effetto.

relative: L'elemento è posizionato rispetto alla sua posizione normale. Impostando le proprietà top, right, bottom e left, l'elemento si sposterà dalla sua posizione normale, ma occuperà comunque spazio nel flusso normale.

absolute: L'elemento viene rimosso dal flusso normale e posizionato rispetto al suo antenato posizionato più vicino (un antenato con un valore di position diverso da static). Se non viene trovato alcun antenato posizionato, viene posizionato rispetto al blocco contenitore iniziale (di solito il viewport).

fixed: L'elemento viene rimosso dal flusso normale e posizionato rispetto alla finestra. Rimane fisso in posizione anche quando si scorre la pagina.

Ecco la sintassi di base per usare la proprietà position:

selector {
    position: value;
}

value: Il comportamento di posizionamento desiderato (ad es. static, relative, absolute, fixed, sticky).

Sfida

Facile

Ti viene fornito un documento HTML con un elemento genitore (<div>) che contiene un elemento figlio (<div>). Il tuo compito è usare la proprietà position per modificare il contesto di posizionamento degli elementi. Segui i passaggi qui sotto:

Scrivi una regola CSS che selezioni l'elemento <div> con la classe container. Imposta la sua proprietà position su relative. In questo modo diventerà un antenato posizionato per i suoi elementi figli.
Scrivi una regola CSS che selezioni l'elemento <div> con la classe box. Imposta la sua proprietà position su absolute. In questo modo verrà rimosso dal flusso normale e potrai posizionarlo rispetto all'antenato posizionato più vicino (container).
Imposta la proprietà top dell'elemento .box su 50px e la proprietà left su 100px. In questo modo il riquadro verrà posizionato a 50 pixel dall'alto e a 100 pixel da sinistra rispetto al suo antenato posizionato (container).

Provalo tu

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>