I posizionamenti assoluti

Dopo i posizionamenti relativi, in questo appuntamento vedremo i meccanismi
che governano i posizionamenti assoluti. Si tratta di un aspetto fondamentale
dei CSS, spesso poco compreso o sottovalutato. Cominciamo subito.

I posizionamenti assoluti in quattro semplici passi

I posizionamenti assoluti si presentano leggermente più complicati
di quelli relativi, ma il loro funzionamento può essere sintetizzato
in quattro semplici passi.

Vediamoli da vicino. Per prima cosa, un elemento posizionato assolutamente
è rimosso dal flusso di pagina.
Ciò significa che per gli altri elementi non posizionati
è come se non ci fosse, dato che non segue la disposizione naturale.

Un elemento posizionato assolutamente è di default reso block-level,
indipendentemente dalla sua natura iniziale.
È come se, insieme a position: absolute dichiarassimo ogni volta
implicitamente display: block. Il fatto che tutti gli elementi posizionati
assolutamente sono promossi a elementi block-level significa in sostanza che è possibile
attribuire loro dimensioni esplicite. Non solo è possibile, ma è consigliabile impostare
quantomeno una larghezza.

Un elemento posizionato assolutamente viene contestualizzato
rispetto al suo containing block. Cosa significa? Semplicemente che viene trovato
per questo elemento una sorta di sistema di riferimento attraverso il quale esso
verrà posizionato. La contestualizzazione risponde alla domanda: si ok, è
posizionamento ma rispetto a cosa?

In sostanza un elemento assoluto trova il suo containing block, ovvero il suo
contesto di posizionamento, nel suo antenato più recente che sia posizionato
relativamente, assolutamente o fisso. Se non ci sono, si procederà a ritroso fino
all'initial containing block, ovvero il contenitore "fittizio" che contiene
l'intero documento.

Infine un elemento posizionato assolutamente viene posizionato a seconda delle proprietà top, right,
bottom e left all'interno del suo containing block. Approfondiremo questo aspetto
essenziale tra breve, ma prima riepiloghiamo cosa succede a un elemento posizionato assolutamente:

1. viene rimosso dal flusso di pagina
2. è reso block-level
3. è contestualizzato rispetto al suo containing block
4. viene posizionato a seconda delle proprietà top, right, bottom e left

La contestualizzazione dei posizionamenti assoluti

Dopo questa piccola introduzione teorica, siamo pronti a procedere con gli esempi.
In questa prima parte vedremo come gli elementi posizionati assolutamente siano rimossi
dal flusso di pagina e contestualizzati. Nel primo esempio
abbiamo due div con quattro paragrafi ciascuno, con id="a" e "b". Nel div di destra (ovvero con id="b")
il terzo paragrafo, che ha classe "pos", viene posizionato assolutamente grazie
alla seguente regola:

Per chi non è molto pratico di CSS, la regola usa il selettore discendente e individua
il paragrafo con classe "pos" all'interno del div con id="b", ovvero proprio il
terzo paragrafo del div di destra. Questo viene posizionato assolutamente attraverso
la dichiarazione position: absolute, rilocato grazie alle due dichiarazioni
top:0 e right:0 e dichiarato largo 200 pixel.

L'effetto è evidente nell'esempio: mentre il terzo paragrafo del div di sinistra segue l'ordine
dei contenuti (ovvero il flusso degli elementi), il terzo paragrafo del div di destra
viene rimosso dal flusso per essere posizionato assolutamente, venendo sistemato
nell'angolo in alto a destra della pagina. Tanto che nel div di destra il quarto paragrafo
viene subito dopo il secondo, proprio come se il terzo paragrafo non ci fosse.
Ora cerchiamo di capire come e perchè.

In sostanza il paragrafo è posizionato assolutamente, e andrà a cercare il containing
block a cui riferirsi. Il div che lo contiene non è posizionato assolutamente né relativamente, né
fisso. Si risalirà ancora verso il contenitore del div, ovvero l'elemento body.
Anche il body non può costituire un containing block, in quanto non è posizionato.
In questo caso non essendoci antenati posizionati,nell'esempio
il paragrafo posizionato assolutamente si riferirà quindi all'initial containing block,
ovvero la pagina, sistemandosi nell'angolo in alto a destra.

Nel secondo esempio le cose sono molto diverse:
come si può notare il terzo paragrafo è ora posizionato assolutamente all'interno del
div che lo contiene, dato che quest'ulitimo è posizionato relativamente. Vediamo la regola
aggiuntiva:

Da evidenziare il fatto che la regola appena vista non ha effetto sulla posizione del div di destra,
visto che non viene dichiarata nessuna traslazione attraverso le proprietà top, right, bottom e left:
ha il solo scopo di specificare che eventuali elementi posizionati assolutamente al suo
interno potranno riferirsi ad esso come containing block.

Da notare infine che nell'esempio
il paragrafo posizionato assolutamente si dispone sopra al primo paragrafo
del div che lo contiene: questo è il comportamento atteso degli elementi posizionati assolutamente,
che si dispongono sopra gli elementi nel flusso di pagina. È importante quindi evitare sovrapposizioni
di contenuto non desiderate.

Capire top, right, bottom e left

Abbiamo visto finora i meccanismi che governano i posizionamenti assoluti, e siamo giunti
alla parte più importante, ovvero il significato delle proprietà top, right, bottom e left.
Si potrebbe pensare che questi valori siano da intendersi come delle coordinate. In
realtà non è proprio così, ed è più facile pensare i valori che queste proprietà possono
assumere come vere distanze. Un'immagine aiuterà a capire il concetto.

Nell'immagine sopra il riquadro rosa è il containing block dell'elemento posizionato assolutamente,
in azzurro. Vengono evidenziate visivamente le quattro proprietà, che rappresentano ciascuna la distanza
tra i due lati concordi dell'elemento posizionato assolutamente e il suo containing block. Per esempio,
top rappresenta la distanza tra il lato superiore dell'elemento posizionato assolutamente e quello del suo containing block.

Per posizionare assolutamente un elemento, è possibile specificare da una a quattro tra le proprietà
tra top, right, bottom e left. Tipicamente però se ne dichiarano due (o una sola): tre o quattro valori
hanno l'effetto di dare conflitti, inconsistenze cross-browser o modificare le dimensioni
dell'elemento posizionato assolutamente.

Top, right, bottom e left possono assumere valori nelle tradizionali unità di misura:
px, em, pt solo per citarne alcune. Da notare che è possibile
anche specificare valori in percentuale: in questo caso le distanze
di un elemento posizionato assolutamente si riferiranno a una percentuale delle dimensioni del suo containing block.

Una nota speciale: è anche possibile specificare valori negativi per queste proprietà. In tal
caso si avrà che il lato concorde dell'elemento posizionato assolutamente è all'esterno del suo
containing block.

Possiamo ora rivedere il primo e il
secondo esempio alla luce di quanto detto. In entrambi
i casi viene specificato top:0 e right:0 che significa che le distanze
tra i lati concordi superiore e destro dell'elemento posizionato assolutamente e il suo containing
block sono pari a zero. Ricordo che lo zero è l'unico numero che non richiede unità di misura.

In sostanza, in entrambi i casi, l'angolo in alto a destra dell'elemento
posizionato assolutamente va a coincidere con il corrispondente angolo del suo containing block.
A cambiare in effetti è solo il contesto di posizionamento.

Gli elementi per comprendere i posizionamenti assoluti ci sono quasi tutti: ho preparato
una pagina che racchiude alcuni esempi.

Lo z-index degli elementi posizionati

I posizionamenti (assoluti, relativi o fissi che siano) permettono di sistemare
o traslare elementi lungo due dimensioni (verticale e orizzontale).
C'è in realtà nei CSS una sorta di profondità, o terza dimensione: lo z-index, che
stabilisce la disposizione degli elementi posizionati lungo l'asse perpendicolare allo schermo.

Lo z-index assume valori interi senza unità di misura, che possono essere positivi o negativi.
Elementi con z-index maggiore vengono disposti sopra (o ancor meglio, davanti) ad elementi
con z-index minore. Non ci resta a questo punto vedere un esempio,
e le quattro regole fondamentali:

Qui di seguito il relativo screenshot:

In sostanza ci sono tre div posizionati assolutamente. Il div con id="c"
è tra i tre quello che ha z-index maggiore, ed è infatti in grado di disporsi sopra
gli altri due elementi posizionati assolutamente, coprendoli.

Il posizionamento fisso

Dopo aver trattato approfonditamente il posizionamento relativo e assoluto,
vediamo brevemente il posizionamento fisso, ottenuto attraverso la
dichiarazione position: fixed.

Il posizionamento fisso non è nient'altro che un caso particolare dei posizionamenti
assoluti, e sono valide quasi tutte le cose dette finora. L'unica differenza rispetto
ai posizionamenti assoluti è che un elemento con posizionamento fisso farà riferimento
sempre al viewport, ovvero la finestra del browser.

Elementi con posizionamento fisso si ancorano a una determinata posizione della finestra
del browser, indipendentemente da altri elementi e dallo scrolling di pagina. Come quelli
posizionati assolutamente, sono rimossi dal flusso di pagina e promossi a block-level.

Vediamo un primo esempio, in cui ci sono
due div:

Ecco il codice CSS:

In sostanza l'elemento fisso, ovvero il div id="box2" viene
ancorato con il lato destro a 50px dal lato destro della finestra del browser,
e a 50 px dal lato superiore attraverso le dichiarazioni position:fixed; top:50px; right:50px.
Si noterà che anche facendo scrolling nella pagina, mantiene la sua posizione fissa rispetto
alla finestra del browser.

Questo quanto di teorico c'è da sapere sul posizionamento fisso.. ma c'è purtroppo
una nota pratica poco positiva: il posizionamento fisso non è supportato da Internet Explorer
fino alla versione 6: elementi dichiarati fissi verranno resi invece nella loro posizione
naturale del flusso della pagina su questi browser. È invece supportato da IE7, Opera, Firefox e Safari.

La mancanza di supporto del posizionamento fisso su IE5, IE5.5 e IE6 è stata spesso
un limite al suo utilizzo pratico: ma con una piccola accortezza possiamo utilizzare
il posizionamento fisso sui browser che lo supportano e assicurarci che degradi abbastanza
bene, servendo il posizionamento assoluto sulle vecchie versioni di IE.

Ecco quindi il secondo
esempio in cui l'elemento di destra è fisso sui browser capaci, mentre ha posizione assoluta
(rispetto all'initial containing block) e quindi subirà lo scrolling della pagina
su IE fino alla versione 6. Faremo leva sul mancato supporto della keyword !important
di cui abbiamo parlato qui
sul blog. Ecco quindi le dichiarazioni CSS essenziali del secondo esempio:

È fondamentale in questo senso usare una strategia simile per essere sicuri che
le nostre pagine degradino bene sui browser che non supportano il posizionamento fisso.

Conclusioni

Si conclude qui questo appuntamento dedicato ai posizionamenti assoluti e fissi:
spero che la quantità e il dettaglio dei concetti trattati siano sufficienti al lettore
per poter padroneggiare questi due aspetti importanti dei CSS.

Questo articolo potrà richiedere più di una lettura per una comprensione approfondita,
ma ho ritenuto necessario fornire tutte le informazioni nella maniera più semplice
e dettagliata possibile. Gli esemi sono disponibili per il download. Alla prossima.