Tra le varie proprietà del linguaggio informatico CSS c’è la position absolute: ecco tutto quello che c’è da sapere, come funziona e a cosa serve questa modalità molto diffusa di posizionamento degli elementi su una pagina.
Cos’è il CSS?
Il CSS non è altro che l’acronimo di Cascading Style Sheets, ovvero i fogli di stile a cascata. Si tratta, infatti, di un linguaggio specifico del settore informatico che serve per la formattazione di documenti in formato HTML, XHTML e XML. I siti web e le collegate pagine web sono realizzate con questo linguaggio. Il CSS ha più di due decenni di vita e nel 1996, il W3C ha emanato le regole per comporlo sotto forma di direttive chiamate Recommendations. Due anni dopo, nel 1998, sempre il World Wide Consortium ha pubblicato le specifiche per il CSS 2. Il Cascading Style Sheets ha preso vita per separare i contenuti delle pagine HTML dalla loro formattazione (o layout) e permettere così delle modalità di programmazione più facili e fruibili dagli autori delle pagine e dagli utenti. Oltre a ciò, ha garantito il riutilizzo di codice e una sua più semplice e snella manutenzione.
Una delle parti più importanti del CSS è il posizionamento degli elementi sulla pagina. La proprietà position determina la modalità con cui saranno presentate le varie componenti della pagina. I valori che la definiscono sono 4: static, relative, absolute e fixed. Di seguito, andremo a osservare da vicino la position absolute.
Cos’è la position absolute e a cosa serve?
La prima cosa da dire per quanto riguarda la position absolute è che l’elemento viene estratto dal normale flusso della pagina e la sua collocazione è impostata in base al valore di 4 proprietà: top, bottom, left, right. Il posizionamento avviene rispetto al box contenitore stesso dell’elemento, che è rappresentato dal primo elemento antenato o ancerstor con un posizionamento differente rispetto a static. Se questo elemento non è presente, la position absolute avviene seguendo l’elemento radice HTML. Quest’ultimo, solitamente coincide con l’area del browser che contiene il documento e inizia nell’angolo in alto a sinistra di tale zona. Dichiarare per l’elemento che si vuole posizionare in modo assoluto un posizionamento relativo senza coordinate e position: absolute per il primo con le coordinate è il modo migliore per mettere in pratica la position absolute di CSS.
Le 4 proprietà che permettono la collocazione – top, left, right e bottom – dell’elemento secondo questa modalità non sono coordinate, bensì delle vere e proprie distanze. Ad esempio, top, non è altro che la distanza che c’è tra la linea superiore dell’elemento in absolute position e quella del suo blocco contenitore. Non è necessario esplicitarle tutte e 4, ma 2 o addirittura 1 sono più che sufficienti. Un’altra caratteristica da tenere a mente è che quando un elemento è posizionato in modo assoluto è reso block-level di default, senza che si tenga minimamente conto della sua natura originale. Seguendo tale proprietà, è possibile e, soprattutto, consigliabile attribuire agli elementi posti assolutamente delle dimensioni esplicite, in particolar modo determinare la misura della larghezza.
