CSS Positioning: Come scegliere il posizionamento corretto

                 

Capire come funziona il posizionamento di un elemento tramite CSS, è fondamentale per padroneggiare correttamente il flow e la struttura delle tue pagine web.

Anche se è un argomento piuttosto semplice e di facile comprensione, molti sviluppatori, non solo alle prime armi, tendono a scrivere codici complessi e molto lunghi per rappresentare forme e posizionamenti che potrebbero essere fatti con due o massimo tre righe di CSS.

Questo perché, quando avanziamo di livello e diventiamo più bravi nello sviluppo in CSS, se non conosciamo a fondo come i comandi base si comportano e come utilizzarli al meglio, riusciamo a trovare delle strade alternative che sì, nella pratica funzionano, ma che poi rendono il nostro codice illeggibile da altri o che addirittura condizionano involontariamente tutti gli altri elementi, con il risultato che dovremo adattare quest’ultimi alle scelte fatte in precedenza.

Quando parliamo di posizionamento, intendiamo come i nostri elementi HTML si comportano nei confronti di altri elementi HTML all’interno del DOM.
Quando sviluppiamo in CSS dobbiamo tenere a mente che ogni elemento è un’ entità condizionata dagli altri elementi che la circondano, anche se grazie a una proprietà di posizionamento che tra poco vedremo, possiamo ovviare a questa regola.

Il comando CSS che gestisce il posizionamento degli elementi è position e può assumere i seguenti valori:

element{
position:static;
  position:relative;
  position:absolute;
  position:fixed;
}

Prima di proseguire e vedere nel dettaglio questi valori, vorrei spendere due parole per parlare della proprietà display.
Ogni elemento HTML viene rappresentato come un rettangolo di pixel all’interno di una pagina web.
Questo rettangolo però si comporta in modo diverso in base al tipo di tag HTML che stiamo utilizzando.
Ad esempio il tag <p> è settato per default con display:block, mentre il tag <a> è settato con display:inline.

I valori display:block e display:inline, rappresentano entrambi dei rettangoli nella nostra pagina ma in particolare il primo posizionerà il nostro elemento su una nuova linea e occuperà tutta la larghezza del suo contenitore, mentre il secondo si svilupperà orizzontalmente con una lunghezza pari a ciò che contiene.

Quando dichiariamo elementi HTML dobbiamo sapere in che forma e dimensione vengono generati in modo da farci capire quali property hanno senso usare senza scrivere righe superflue.

Dopo questa piccola ma doverosa premessa, vediamo ora nel dettaglio come i valori della proprietà position si comportano.

STATIC

Il valore static è il valore default di posizionamento che ogni elemento assume quando lo dichiariamo nel nostro file HTML.

Questo valore non dice molto su come l’elemento si debba comportare e non viene mai utilizzato volontariamente, se non quando vogliamo risettare il valore static di un elemento.

Se lasciamo invariato questo valore, altre proprietà come left, bottom, right, top e z-index verrano ignorate.

RELATIVE

Questo tipo di posizionamento sblocca la possibilità di utilizzare le properties “top”, left, bottom, right e z-index.

Relative senza l’utilizzo delle proprietà elencate sopra, non differisce particolarmente da static, ecco come funzionano:

  • top, left, bottom, right ti permettono di distanziare l’elemento da ciò che lo circonda in alto, a sinistra, in basso e a destra.
https://medium.com/media/7b9158c6660a786b80e6afba88aa22f6/href
  • La property z-index ti permetterà di ordinare i tuoi elementi sull’asse z.
    z-index accetta come valori numeri interi positivi o negativi per determinare l’ordine sull’asse z dello schermo.
    Se immaginiamo i nostri elementi come fogli di diverse dimensioni distesi uno sull’altro, z-index ci permette di determinare con quale ordine diversi fogli con position:relative dovranno apparire a schermo.
https://medium.com/media/3f0bcfdfd879b4dbd629defe6108ae4c/href

Il valore relative nasconde inoltre una funzionalità molto partciolare che ti sarà utili combinandola, assieme ad un altro elemento, con il valore absolute.
Infatti, absolute come vedremo tra poco, permette di inserire elementi a schermo con una posizione libera e indipendente e se noi proviamo ad associare questo valore ad un elemento, quest’ultimo sarà completamente libero da vincoli non solo di posizionamento, ma anche di appartenenza visto che pur dichiarando un elemento con la property absolute, ci accorgeremo che quest’ultimo si posizionerà sullo schermo prendendo come riferimento l’intero DOM.
Ma se noi volessimo che l’elemento abbia una posizione arbitraria ma che rimanga comunque all’interno dei margini del suo contenitore?
Eccome quindi la funzione segreta:
Settando la property position ad un contenitore di un elemento dato, quest’ultimo potrà essere posizionato con una posizione arbitraria, ma che dipenda comunque dai margini del suo contenitore.

https://medium.com/media/423989263f610f583aa19aa081e27050/href

ABSOLUTE

absolute ci permette di posizionare i nostri elementi HTML con una posizione arbitraria e completamente indipendente dagli altri elementi che non hanno position settata su questo valore, in caso contrario, altri elementi che hanno anche essi posizionamento absolute, hanno un approcio relativo fra di essi.

E’ davvero utile, ma attenzione a non abusarne e non utilizzarla su elementi che in un certo modo debbano essere dipendenti da altri per un corretto flow della tue pagine.
Quando scrivi codici in CSS, ricordati sempre di avere un approcio “mobile friendly”, ed un elemento che può sembrarti posizionato correttamente magari per la versione desktop, sicuramente non lo sarà per dispositivi diversi e comporta a scrittura di codice non necessaria.

Come detto prima, se vogliamo assegnare ad un elemento una posizione arbitraria ma che resti all’interno di un contenitore, ti basta settare quest’ultimo con position:relative.

https://medium.com/media/a349143eef2be26c1e4d04346f17f31c/href

FIXED

Per ultimo, se vogliamo posizionare elementi in modo arbitrario sul nostro schermo, ma che restino sempre visibili anche se l’utente scrolla la pagina, fixed è il valore che fa per noi.

https://medium.com/media/1fb94c25be87bb77f9aba9a5e37c1713/href