Posizionamenti CSS: quanti ne esistono?

I posizionamenti CSS rappresentano quelle proprietà che definiscono la posizione, appunto, degli elementi all’interno di un portale web. Parliamo di un argomento fondamentale della programmazione, che spesso risulta essere tanto importante quanto complesso. In questo articolo vogliamo parlarti delle varie tipologie di position che ti vengono in aiuto nella costruzione di una pagina web.

Esistono 5 tipi di posizionamenti CSS:

position: relative;

L’elemento è posizionato rispetto alla sua posizione attuale relativamente al suo box contenitore. L’impostazione delle proprietà in alto, a destra, in basso e a sinistra di un elemento relativamente posizionato farà sì che venga posizionato lontano dalla sua posizione attuale.

position: absolute;

Un elemento con posizione: assoluta è posizionato rispetto all’ “Antenato” posizionato più vicino (anziché posizionato rispetto alla finestra, come fisso).

position: sticky;

Un elemento con posizione sticky viene posizionato in base allo scorrimento dell’utente. L’elemento a cui è stata assegnato questo tipo di posizione alterna tra relativo e fisso, a seconda da come una persona interagisce con la pagina. In questo caso, quindi, dipende tutto dalla user experience, che definisce il posizionamento più adatto.

position: static;

Gli elementi HTML sono posizionati, per l’appunto, in maniera statica e rispecchiano l’impostazione predefinita. Gli elementi posizionati in questo modo specifico non sono interessati dalle proprietà superiore, inferiore, sinistra e destra (top, bottom, left, and right properties), ma rispecchia la sua posizione normale nel flusso del documento web.

position: fixed;

Un elemento con posizione fissa viene posizionato rispetto al viewport, il che significa che rimane sempre nella stessa posizione anche se la pagina viene fatta scorrere.

‍