Come abbiamo visto nelle lezioni precedenti, gli elementi blocco hanno la caratteristica di posizionarsi uno sotto all’altro man mano che vengono dichiarati all’interno del documento HTML. Grazie a strutture come le Griglie CSS siamo stati in grado di modificare questo comportamento ed abbiamo iniziato ad allineare i nostri elementi uno di fianco all’altro rispettando un numero massimo di colonne.
La possibilità di allineare elementi block tra loro ci viene fornita dalla regola float, vi basterà controllare all’interno del file 960.css per vedere come questa venga utilizzata. Quello che fa questa regola è principalmente far galleggiare i nostri elementi all’interno di un contenitore: grazie a questa caratteristica possiamo infatti far posizionare più elementi uno di fianco all’altro fino a raggiungere le dimensioni massime del contenitore.
Ma come potremmo comportarci se volessimo, ad esempio, posizionare uno di questi elementi al di fuori del suo contenitore?
Per fortuna nostra gli sviluppatori CSS ci sono venuti in contro fornendoci una regola davvero interessante, la regola position. Ma prima di andare a vedere questa regola partiamo con una semplice struttura HTML che utilizza la griglia 960.gs per impostare il layout.
Come potete vedere la struttura del nostro layout è veramente semplice e ci permette di realizzare un layout a due colonne. Però, come possiamo vedere dall’immagine sottostante, i due titoli di secondo livello h2, sono sempre posizionati all’interno del contenitore.
Ma con un pò di CSS siamo in grado di cambiare la situazione permettendo ai nostri titoli di attraversare il proprio contenitore per avvicinarsi ai bordi del nostro browser.
Quello che stiamo facendo con queste regole è dichiarare i nostri elementi con una posizione assoluta rispetto al suo contenitore, in modo che i suoi punti di ancoraggio non facciano più riferimento al suo contenitore, ma bensì si riferiscano direttamente alla finestra del browser.
Applicando questa regola siamo in grado di posizionare un elemento dove vogliamo, nel mio esempio ho posizionato il titolo #destra a soli 20px dal bordo destro del mio browser e il titolo #sinistra a 20px dal bordo sinistro; ecco qua un’immagine di esempio:
Per motivi di spazio ho tagliato l’immagine, ma quello che volevo farvi vedere è che, nonostante le dimensioni della finestra del browser, quest’ultimo cercherà di posizionare i nostri titoli nelle posizioni da noi scelte.
Uno dei risultati che produce questa tecnica è che gli elementi posizionati con il valore absolute non verranno più ritenuti appartenenti al suo contenitore e quindi non avranno diritto ad occupare uno spazio all’interno di esse, riducendo le sue dimensioni effettive a quelle degli elementi contenuti (nell’esempio sono i paragrafi).
Potrebbe sembrare che posizionare un elemento in modo assoluto rispetto alle dimensioni del browser sia un pò troppo, alla fine non conosciamo le dimensioni dello schermo del nostro visitatore e potrebbero far sballare i nostri layout. Ancora una volta gli sviluppatori CSS hanno pensato ad ogni evenienza e ci hanno messo a disposizione un altro valore che, al posto di riferirsi alle dimensioni del browser, ci permetteranno di riferirci al contenitore dello stesso elemento fornendoci la stessa libertà di posizionamento.
Sto parlando del valore relative che può essere utilizzato in questo modo:
e che nel nostro esempio precedente produrrà questo effetto:
Con questo semplice esempio abbiamo scoperto che è possibile utilizzare anche dei valori negativi che modificheranno la posizione dei nostri elementi rispetto al proprio contenitore: attenzione però a testarli sufficientemente nei browser che vi interessano. Il margin (così come il padding) negativi rischiano di creare delle incompatibilità tra browser differente!