Studio sul posizionamento assoluto

Il presente studio è finalizzato alla realizzazione di un layout libero tramite il posizionamento assoluto. Per garantire la compatibilità con risoluzioni basse (come 800 x 600 ), ho scelto di adottare misure relative, e più precisamente misure in percentuale. Questo garantisce una soglia di sicurezza nel posizionamento dei blocchi, evitando che essi si sovrappongano. Per porre un freno all'espansione incontrollata dei blocchi ho inserito un'immagine di background (la mosca alla vostra sinistra) nell'elemento <body>, la quale fungerà da "confine". Ma vediamo insieme il codice della pagina.

Il codice della pagina

Cominciamo con la struttura della pagina:

<body>
<div id="page">
<div id="menu">...</div>
</div>
<div id="content">...</div>
</body>

Si noti che la barra di navigazione è stata inserita prima del contenuto. In realtà ciò è sconsigliato, in quanto per un corretto posizionamento nei motori di ricerca è sempre preferibile inserire i contenuti prima della navigazione. In questo caso il posizionamento assoluto lo consente con una certa facilità. Tuttavia, trattandosi solo di un esempio, ho preferito sorvolare su questo importante aspetto. Ricordiamo infine che il corretto posizionamento dei contenuti e della barra di navigazione facilita in modo considerevole l'accessibilità della pagina. Chiarito questo aspetto, esaminiamo da vicino il codice del foglio di stile.

#page {
margin: 2em auto;
padding: 0;
width: 58%;
background: #fff;
position: absolute;
top: 0;
right: 3%;
}

(...)

#content {
position: absolute;
top: 40%;
right: 15%;
width: 50%;
background: #fff;
color: #000;
border: 1px solid #000;
margin: 0;
padding: 0;
}

Notiamo subito che tutti i valori del posizionamento dei blocchi e la loro stessa grandezza sono espressi in misure relative. Questo ci permette di controllare il ridimensionamento dei blocchi in modo tale da evitare sovrapposizioni qualora la finestra del browser venisse ridimensionata. Ora dobbiamo solo comprendere la teoria che sostiene il posizionamento assoluto.

La teoria

La teoria alla base del posizionamento assoluto è relativamente semplice. Possiamo trovare le informazioni che ci occorrono all'indirizzo http://www.w3.org/TR/CSS21/visuren.html. In particolare leggeremo:

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be oscured themselves) depending on the stack levels of overlapping boxes.

Abbiamo quindi alcuni punti fermi:

Un box posizionato assolutamente è rimosso del tutto dal flusso del documento.
Ciò significa che gli altri elementi si comporteranno come se il box non ci fosse.
Un box posizionato assolutamente può sovrapporsi ad altri box o essere oscurato da questi.
Poichè è rimosso dal normale flusso del documento, un box posizionato assolutamente si comporta proprio come se fosse un post-it.
Un box posizionato assolutamente non fluttua attorno ad altri elementi.
A differenza degli elementi flottanti, un box posizionato assolutamente non viene circondato dagli altri elementi, che non sono più a conoscenza della sua presenza all'interno del flusso del documento.

Scrive Eric Meyer nel suo celebre libro «Cascading Style Sheets. La guida completa»:

Quando un elemento è posizionato in modo assoluto, viene rimosso completamente dal flusso del documento. Poi viene posizionato rispetto al suo blocco contenitore e i suoi limiti sono disposti mediante le proprietà di scostamento (top, left e così via). L'elemento posizionato non scorre intorno al contenuto di altri elementi, e il loro contenuto non scorre intorno all'elemento posizionato. Questo implica che un elemento posizionato in modo assoluto può sovrapporsi ad altri elementi, ma anche che gli altri elementi possono sovrapporsi all'elemento (...). Il blocco contenitore per un elemento posizionato in modo assoluto è il più vicino elemento antenato che ha un valore di position diverso da static. Per un autore è abbastanza comune scegliere un elemento che servirà come blocco contenitore per elemento posizionato in modo assoluto e assegnarli una position di relative con nessuno scostamento (offset. N.d. R.).

Il presente layout differisce da questa utilissima regola per il fatto che ho preferito non assegnare una position:relative all'elemento <body> e lasciare come punto di riferimento la finestra del browser. La tecnica accennata da Eric Meyer prende il nome di posizione di contesto (context positioning) e può essere formulata così:

A differenza di un elemento a cui non viene definito il valore position, un elemento a valore relative fornirà una posizione di contesto (context positioning) ad ogni elemento con posizione assoluta contenuto al suo interno. Quindi un elemento con valore position:absolute contenuto all'interno di un elemento con valore position:relative avrà una posizione relativa ai confini dell'elemento in cui è contenuto, piuttosto che a quelli della finestra del browser.

Applicazioni pratiche di tale tecnica si trovano nei layout a tre colonne presenti sul sito di Gianluca Troiani e nella sua ottima «CSS. Guida completa», in cui affronta le problematiche relative a questo tipo di layout offrendo le possibili soluzioni.

Conclusione

Al termine di questa sommaria trattazione dell'argomento, avrete capito come questo tipo di layout libero sia efficace solo in termini di studio. Nella realtà invece incontriamo delle difficoltà nella leggibilità della pagina e nella sua usabilità. Difatti la posizione del menu di navigazione è quanto mai improbabile, e certamente non facilita l'utente nel compito di spostarsi fra le sezioni del sito. L'inserimento di un'immagine di background, seppur ridotta, potrebbe causare delle difficoltà di concentrazione a chi soffre di deficit cognitivi o di disturbi dell'attenzione. Insomma, un pessimo esempio. Per quanto riguarda il posizionamento assoluto, consiglio la lettura delle due guide citate sopra, che sono due testi fondamentali per chi si accosta al mondo dei fogli di stile. Qui potete visionare il foglio di stile. Alla prossima!