L’argomento del posizionamento è uno degli elementi più complessi che riguardano i CSS. Nel nostro articolo andremo a vedere come viene utilizzata la proprietà “position” che consente di posizionare un elemento all’interno di una pagina web, prelevandolo dal consueto flusso del documento. La proprietà chiamata “position” viene utilizzata per collocare con precisione un elemento all’interno di una pagina web, spostandolo dal resto del testo del documento. Vediamo nello specifico di cosa si tratta.

Cosa si intende per CSS?

L’acronimo CSS sta per “Cascading Style Sheets”, che letteralmente equivale in italiano a “fogli di stile”. Si tratta di un linguaggio che si occupa della gestione del design e della presentazione dell’aspetto estetico delle pagine web. Lavora in concomitanza con l’HTML e con il linguaggio che gestisce i contenuti delle pagine.

Con questo linguaggio si possono stabilire delle regole, secondo cui il sito avrà il compito di mostrare le informazioni lasciando separati i comandi relativi alla formattazione e stile, da quelli relativi al contenuto.

Vengono chiamati “a cascata” poiché i fogli di stile su cui lavorare sono molteplici, ma solo uno eredita tutte le proprietà dei fogli che lo precedono. Quando si vuole personalizzare un sito o un blog è quindi, necessario ampliare le conoscenze del CSS.

Che cosa significa “position absolute”?

Il “position” è un tema molto complesso ma altrettanto importante. Si tratta di una proprietà fondamentale per la gestione della posizione degli elementi, in quanto può determinare la modalità di presentazione di un elemento all’interno di una pagina. Viene applicata a tutti gli elementi. 

Utilizzando la proprietà chiamata “position relative” l’elemento viene collocato nel suo “box contenitore”. Considerando la sua posizione originale, potrà essere modificata la sua posizione utilizzando le proprietà: “top”, “left”, “bottom” e “right” che possono assumere valori negativi e positivi oppure modificare il suo “z-index”.

Con la proprietà “position absolute”, invece, il box dell’elemento viene eliminato dal flusso del documento e inserito in base ai valori che sono forniti attraverso le proprietà “top”, “left”, “bottom” o “right”. In questo caso, il posizionamento sarà effettuato tenendo conto sempre del “box contenitore” dell’elemento. Questo viene rappresentato dal primo elemento che abbia un posizionamento differente da “static”.

Se nessun elemento di livello superiore dovesse avere questa proprietà, allora verrà fatto riferimento all’elemento iniziale html, che normalmente coincide con l’area del browser. Un elemento inserito in modo assoluto, scorre insieme a tutto il documento. 

A cosa serve posizionare in modo assoluto?

Per impostazione di default, il valore della proprietà “position” si trova impostato su “static” e coincide con la normale posizione occupata da ogni elemento contenuto nel documento. I valori che la proprietà “position” possono assumere sono:

  • static: che rappresenta la normale posizione di ogni elemento contenuto nel documento e si tratta di un valore predefinito;
  • absolute: che indica l’elemento che va posizionato in modo assoluto rispetto al primo elemento iniziale, che possiede una posizione differente da “static”. L’elemento sarà posizionato in base alla coordinate fornite attraverso le proprietà “top”, “left”, “bottom” e “right”;
  • fixed: indica che l’elemento va collocato in modo assoluto rispetto all’elemento iniziale html che coincide con l’area del browser. L’elemento sarà posizionato in base alle coordinate fornite attraverso le proprietà “top”, “left”, “bottom” e “right”. La differenza con l’absolute risiede nel fatto che quando l’utente muove la pagina, l’elemento resta fisso sullo schermo senza muoversi insieme alla pagina;
  • relative: indica che l’elemento va posizionato in modo relativo rispetto alla sua normale posizione. Anche in questo caso, sarà posizionato tenendo conto delle coordinate fornite attraverso le proprietà “top”, “left”, “bottom” e “right”;
  • inherit: indica che il valore della proprietà “position” dovrebbe essere oggetto di eredità da parte del cosiddetto “elemento padre”.

Quando posizioniamo un elemento, pertanto, è possibile specificare rispetto a quale elemento della pagina posizionarlo, attraverso delle coordinate che vengono fornite direttamente dall’utente.

Differenza tra posizionamento fisso e posizionamento assoluto

Per quanto concerne il posizionamento fisso vengono utilizzate le stesse regole previste per il posizionamento assoluto. Il valore “fixed” è impostato sulla proprietà “position” e indica che l’elemento deve essere collocato in modo assoluto rispetto l’elemento originario html, che a sua volta coincide con l’area del browser, prelevandolo quindi dal consueto flusso del documento.

L’elemento viene in secondo luogo, posizionato sulla base di valori delle coordinate che l’utente fornisce mediante le proprietà “top”, “left”, “bottom” e “right”. La differenza con il posizionamento assoluto la si può notare nel momento in cui l’utente muove la pagina e l’elemento, che era stato in precedenza posizionato come fisso, non si muove con essa ma piuttosto rimane fisso sullo schermo.