Fondamenti del posizionamento in CSS

Il posizionamento è tutto#section1

Il posizionamento in CSS viene spesso frainteso: a volte, presi dalla furia del bug-fixing, si applicano diversi valori a position per un dato selettore finché non si ottiene il funzionamento desiderato. Tale processo è tedioso e può andar bene per in un certo momento, ma è obbligatorio sapere perché specificare qualcosa come position: relative riesca a sistemare il bug presente nel layout. Spero che riusciate ad imparare i valori e i comportamenti della proprietà position e, cosa ancora più importante, che effetto possa avere un dato valore sul vostro markup. La specifica CSS ci offre cinque proprietà per position: static, relative, absolute, fixed ed inherit. Ciascuna di queste ha uno scopo specifico e comprenderli è il segreto per padroneggiare i layout basati sui CSS.

Seguire il flusso#section2

Per prima cosa, facciamo un passo indietro per capire in che mondo ci stiamo muovendo. Più o meno come nel mondo reale, in CSS si lavora all’interno di confini, che in questo caso prendono il nome di normal flow [flusso normale, ndr]. Stando alla specifica CSS 2.1:

I box nel flusso normale appartengono ad un contesto di formattazione, che può essere block o inline, ma non entrambe simultaneamente. I box di tipo block prendono parte al contesto “block formatting”. I box inline partecipano ad un contesto di formattazione inline.

Pensate al “box” descritto nella specifica come ad un cubetto di legno, simile a quelli con cui giocavate da piccoli. Ora, pensate al flusso normale come ad una legge simile alla legge di gravità. Il flusso normale del documento descrive come gli elementi si impilano uno sull’altro, dall’alto verso il basso, nell’ordine in cui appaiono nel markup. Magari vi ricordate di quando impilavate dei cubetti con le lettere dell’alfabeto in torri altissime: il normal flow non è diverso da quei cubetti soggetti alla legge di gravità. Da bambini mettevate un blocco sopra l’altro: nel vostro markup avete un elemento dopo l’altro. Quello che da bambini tuttavia non potevate fare era dare delle proprietà a quei blocchi in modo tale che sconfiggessero la legge di gravità. Ed ecco che all’improvviso, CSS sembra molto più interessante dei cubetti con le lettere dell’alfabeto!

Static e relative: niente di nuovo qui#section3

Le proprietà static e relative di position si comportano come i blocchetti della vostra infanzia: si impilano come vi aspettereste che facciano. Si noti che static è il valore di default di position per ogni elemento, nel caso vi dimentichiate di assegnargli un altro valore. Se avete tre elementi posizionati staticamente nel vostro codice, questi si posizioneranno uno sull’altro come vi aspettereste. Prendiamo un esempio con tre elementi, tutti con il valore di position impostato a static:

 
#box_1 { 
position: static;
width: 200px;
height: 200px;
background: #ee3e64;
}
 
#box_2 { 
position: static;
width: 200px;
height: 200px;
background: #44accf;
}
 
#box_3 { 
position: static;
width: 200px;
height: 200px;
background: #b7d84b;
}
 

Nell’esempio A, potete vedere tre elementi impilati come una semplice torre. Affascinante, vero? Avete appena assistito a “Fondamenti di costruzioni coi blocchi”. Complimenti!

Potete usare il valore static per layout semplici, ad una colonna, nei quali ogni elemento sta sopra quello successivo. Se volete cominciare a spostare in giro quegli elementi usando le proprietà offset come top, right, bottom e left, non avrete fortuna. Queste proprietà non sono disponibili per un elemento static. In effetti, un elemento static non può nemmeno creare un nuovo sistema di coordinate per gli elementi figlio. Un attimo. Cosa? Mi sono perso a sistema di coordinate. Ricevuto! Spieghiamo come usare il valore relative.

Gli elementi posizionati in maniera relativa si comportano esattamente come quelli posizionati staticamente: giocano bene con gli altri, si impilano bene e non scatenano putiferi. Difficile da credersi, vero? Guardate l’esempio precedente. Questa volta applichiamo il valore relative:

 
 
#box_1 { 
position: relative;
width: 200px;
height: 200px;
background: #ee3e64;
}
 
#box_2 { 
position: relative;
width: 200px;
height: 200px;
background: #44accf;
}
 
#box_3 { 
position: relative;
width: 200px;
height: 200px;
background: #b7d84b;
}
 

L’esempio B prova che gli elementi posizionati relativamente si comportano esattamente allo stesso modo di quelli posizionati staticamente. Quello che potreste non sapere è che gli elementi con un valore di posizionamento relative sono come Clark Kent: nascondono poteri molto più grandi rispetto ai loro fratelli statici.

Per cominciare, possiamo sistemare gli elementi posizionati relativamente con le proprietà offset: top, right, bottom e left. Usando il markup dell’esempio precedente, aggiungiamo una posizione offset a #box_2:

 
 
#box_2 { 
position: relative;
left: 200px;
width: 200px;
height: 200px;
background: #44accf;
}
 

L’esempio C mostra tale posizionamento relativo in azione. I nostri tre blocchi si impilano correttamente, ma questa volta il blocco blu (#box_2) è spostato di 200 pixel a partire da sinistra. Qui è dove cominciamo a piegare la legge di gravità alla nostra volontà. Il blocco blu è ancora nel flusso del documento, gli elementi si impilano uno sull’altro ma notate il blocco verde (#box_3) in fondo: sta sotto al blocco blu nonostante il blocco blu non sia direttamente sopra questo. Quando usate la proprietà offset per spostare un elemento posizionato relativamente, questo non influisce sull’elemento o sugli elementi che seguono. Il blocco verde è ancora posizionato come se il blocco blu fosse nella sua posizione non-offset. Provate a farlo con la torre di blocchi di legno dell’alfabeto!

Creare un sistema di coordinate per gli elementi figlio è un altro super-potere della proprietà di posizionamento relativo. Un sistema di coordinate è un punto di riferimento per le proprietà offset. Ricordate come nell’esempio C il nostro blocco blu (#box_2) non si porta all’interno di alcun altro elemento, in questo modo il sistema di coordinate utilizzato per spostarsi di 200 pixel a sinista è relativo al documento stesso. Se piazziamo l’elemento #box_2 all’interno di#box_1, otterremo un risultato differente, poiché #box_2 si posizionerà relativamente al sistema di coordinate di #box_1. Per il prossimo esempio, non cambierò alcunché all’interno del CSS, modificheremo solo il nostro HTML per spostare #box_2 all’interno di #box_1:

 
 
<div id="box_1">
   <div id="box_2"></div>
</div>
 

L’esempio D mostra il nostro nuovo markup. A causa del nuovo sistema di coordinate, il blocco blu misura il suo offset di 200 pixel dalla sinistra del blocco rosso (#box_1) invece che dal documento. Questa pratica è più comune con gli elementi impostati a position: absolute: il modo in cui avreste voluto costruire le vostre torri da bambini.

Absolute: sempre e ovunque#section4

Se il valore relative si comporta come Superman, allora il valore absolute rispecchia Inception: un posto in cui create il vostro mondo. A differenza dei valori static e relative, un elemento posizionato assolutamente viene rimosso dal flusso normale. Significa che lo potete mettere ovunque e non influenzerà né sarà influenzato da nessun altro elemento nel flusso. Pensatelo come un elemento con una gigantesca striscia di velcro sul retro: ditegli dove deve attaccarsi e si attaccherà. Esattamente come un valore relative, gli elementi posizionati assolutamente rispondono alle proprietà di offset per il posizionamento. Potete settare un elemento a top: 100px e left: 200px; e quell’elemento si piazzerà esattamente a 100 pixel dal top e a 200 pixel dalla sinistra del documento. Prendiamo ora un esempio con quattro elementi:

 
 
#box_1 { 
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 { 
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: #44accf;
}
#box_3 { 
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: #b7d84b;
}
#box_4 { 
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: #ebde52;
}
 

L’esempio E mostra quattro blocchi, ciascuno in un angolo della finestra del browser. Dal momento che abbiamo impostato la position di ciascun box al valore absolute, abbiamo essenzialmente attaccato con il velcro ogni box ad un angolo della finestra del browser. Ridimensionando la finestra del browser, questi blocchi rimarranno nei rispettivi angoli. Se rimpicciolite la finestra del browser fino a che i blocchi si sovrappongono, noterete che non vi è alcun tipo di interazione perché sono fuori dal flusso normale del documento.

Proprio come gli elementi relative, gli elementi absolute creano un nuovo sistema di coordinate per gli elementi figlio. L’esempio F estende l’esempio E, con un elemento arancio messo in ciascun blocco. Notate come le coordinate di offset siano prese rispetto ad ogni elemento padre.

Per non essere da meno rispetto ad altri valori della proprietà position, il valore absolute offre alcune funzionalità davvero forti con le proprietà di offset. Usate due delle quattro proprietà di offset e potrete allargare un elemento senza definirne una larghezza o un’altezza: sarà vincolato solo dall’elemento padre o dal documento stesso. Vediamolo in azione. Considerate il codice seguente:

 
 
#box_a { 
position: absolute; 
top: 10px;
right: 10px;
bottom: 10px;
left: 10px; 
background: red; 
}
#box_b { 
position: absolute; 
top: 20px;
right: 20px; 
bottom: 20px; 
left: 20px; 
background: white;
}
 

Nell’esempio G abbiamo creato un border tramite offset di 10 pixel a partire dal documento ed è interamente fluido al variare delle dimensioni del documento. Tutto fatto con il posizionamento assoluto e gli offset. In un altro esempio, possiamo creare un layout a due colonne che riempie l’intera altezza del documento. Ecco il CSS:

 
 
#box_1 { 
position: absolute;
top: 0;
right: 20%; 
bottom: 0;
left: 0;
background: #ee3e64;
}
 
#box_2 { 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 80%; 
background: #b7d84b;
}
 

Nell’esempio H2 concentriamoci sul blocco blu (#box_2). Notate come uso solo un offset, left: 100px;. Questo permette all’elemento #box_2 di mantenere il suo margine superiore e spostarsi ancora di 100 pixel da sinistra. Se applichiamo un secondo offset dall’alto, vedremmo il nostro blocco blu (#box_2) tirato verso il top del documento. Potete vederlo qui, nell’esempio H3:

 
 
#box_2 { 
position: absolute;
top: 0;
left: 100px;
width: 200px;
height: 200px;
background: #44accf;
}
 

Fixed: sempre lì#section5

Un elemento con position: fixed condivide tutte le regole di un elemento posizionato in modo assoluto, ad eccezione della viewport (la finestra del browser o del device) che risulta essere il riferimento per l’elemento fixed, a differenza di quanto avviene in qualunque elemento padre. Inoltre, un elemento fixed non segue lo scrolling del documento, ma rimane…fisso. Guardiamo questo esempio:

 
 
#box_2 {
position: fixed; 
bottom: 0; 
left: 0; 
right: 0; 
}
 

L’esempio I mostra un footer con del testo di copyright come elemento fixed. Mentre fate lo scroll della pagina, noterete che non si muove. Notate che le proprietà di offset left e right sono impostate a zero. Dal momento che il valore di fixed si comporta in maniera simile al valore absolute, possiamo stirare la larghezza dell’elemento perché abbia la stessa dimensione della viewport mentre fissiamo l’elemento in fondo usando bottom: 0;. Siate prudenti con l’utilizzo del valore fixed di position: il supporto nei browser più vecchi è, nel migliore dei casi, irregolare. Ad esempio, le versioni più vecchie di Internet Explorer rendono gli elementi fixed come elementi static. E adesso sapete che gli elementi static non si comportano come gli elementi fixed, giusto? Se pianificate di usare elementi fixed in un layout, ci sono molte soluzioni che fanno in modo che il vostro elemento si comporti in maniera corretta nei browser che non supportano il valore fixed.

Inherit: qualcosa per niente#section6

Come ho detto all’inizio di questo articolo, ci sono cinque valori possibili per la proprietà position. Il quinto valore è inherit. Funziona come suggerisce il suo nome: l’elemento eredita il valore del suo elemento padre. Tipicamente, gli elementi con la proprietà position non ereditano naturalmente il valore del loro padre: il valore static viene assegnato nel caso in cui non ci sia alcun valore per position. Fondamentalmente, potete usare inherit o il valore dell’elemento padre per ottenere il medesimo risultato.

In azione#section7

Tante chiacchiere e niente azione. Consideriamo un vero sito web che usa tutti i valori di position. L’esempio J mostra un tipico layout di sito con un header, un menu di navigazione, del contenuto ed un footer. Passiamo in rassegna ciascun elemento e discutiamone la proprietà position e perché abbiamo scelto quella proprietà.

Cominciamo dall’elemento #container. Si tratta semplicemente dell’elemento che contiene tutto, che io uso per posizionare al centro il contenuto all’interno della viewport. L’elemento #nav è il primo elemento all’interno dell’elemento #container. Nessuna proprietà position è assegnata all’elemento #nav, così di default è impostata a static. Va bene così: non abbiamo bisogno di fare nulla per spostare questo elemento o per creare un nuovo sistema di coordinate. Avremo bisogno di farlo con #content nel nostro prossimo elemento, così che per quell’elemento avremo applicato una proprietà position impostata a relative.

Dal momento che non stiamo usando alcun offset qui, il valore di position non ha davvero alcuna influenza sull’elemento #content, ma lo abbiamo messo lì per creare un nuovo sistema di coordinate per l’elemento #callout. Il nostro elemento #callout è impostato a position: absolute e dal momento che è l’elemento padre, #content è settato a relative, le proprietà di offset che stiamo usando su #callout si basano sull’elemento padre che lo contiene. Inoltre, ho usato una delle feature più cool del valore absolute sul nostro elemento #callout: impostando gli offset top e bottom a 100px ho stirato l’elemento #callout all’altezza intera del documento meno 100px di offset al top e al bottom.

Dal momento che l’elemento #callout ha un valore absolute, non influisce sugli altri elementi. Pertanto, abbiamo bisogno di aggiungere del padding all’elemento #content per fare in modo che i paragrafi non scompaiano sotto a questo. Impostare il padding sulla destra di #content a 250px fa rimanere il contenuto completamente visibile agli utenti. Per portare in primo piano ciò che è in secondo piano, abbiamo aggiunto un footer con una posizione fixed per farlo restare fissato al bordo inferiore della pagina. Mentre facciamo lo scroll della pagina, il footer rimane al suo posto. Così come abbiamo aggiunto il padding al #content per evitare che i paragrafi sparissero sotto ad esso, abbiamo bisogno di fare lo stesso per l’elemento #footer perché è un fratello del valore absolute. Aggiungere 60px al padding-bottom dell’elemento #content assicura che si possa far scorrere l’intero documento senza perdere alcuna riga di testo che sarebbe normalmente nascosto sotto l’elemento #footer.

Ora abbiamo un semplice e grazioso layout con navigazione, contenuto, un’area callout ed un footer che utilizza gli elementi static, relative, absolute e fixed. Dal momento che stiamo usando il valore fixed in questo layout, dovremmo applicare alcune tecniche per assicurarsi che i vecchi browser rispettino comunque il nostro design.

Conclusioni#section8

Con il potere della proprietà position potete realizzare con successo molti layout. Grazie al cielo l’80% dei valori della proprietà position hanno un supporto eccellente sia nei nuovi che nei vecchi browser. C’è però da stare attenti al valore fixed. Comprendere il nocciolo di questi valori di property vi dà degli elementi fondamentali e solide basi per creare layout basati sui CSS, limitati solo dalla vostra fantasia. Si spera che adesso i giorni in cui tiravate ad indovinare i valori di position nella frenesia del bug fixing dell’ultimo minuto siano finiti.

Illustrazioni: {carlok}