Benvenuto! Se sei un nuovo visitatore ti consiglio di iscriverti al mio Feed RSS in modo da essere sempre aggiornato riguardo l'uscita di nuovi articoli oppure sbirciare tra i tutorials ed i progetti.
Per avere un'idea del best-content presente in questo blog puoi leggere il post intitolato "Ed ora è il momento di rilanciare alcune iniziative! (1a parte e 2a parte)".
Buona navigazione e grazie per la visita!

Introduzione

Questo tutorial è una traduzione dell'articolo chiamato "Understanding CSS Positioning part 1" di Kilian Valkhof.

Senza ombra di dubbio il posizionamento è la parte più difficile da capire dei CSS.
Non solo perchè ciò dipende molto dal browser che l'utente utilizza, ma anche perchè i CSS permettono più modi di posizionare un elemento con i relativi vantaggi e svantaggi.

Display

Prima di iniziare è giusto parlare dei 2 modi di visualizzazione di un elemento: block ed inline.

Display: block

Block può essere considerato letteralmente come un "blocco".
Esso ha una specifica larghezza ed altezza, opzionalmente esse possono dipendere dal suo contenuto anche se le dimensioni date mediante CSS hanno la priorità.
Un'altra proprietà degli elementi visualizzati in block è che non possono stare nella stessa linea.
Anche se un elemento ha una larghezza piccola , il prossimo elemento sarà visualizzato sempre sotto di esso.
Due elementi in display:block verranno visualizzati come segue:

Display: inline

Display: inline è in qualche modo l'opposto.
Elementi con display:inline prendono sempre le dimensioni del loro contenuto ed ignorano qualsiasi dimensioni specificata dal CSS (Internet Explorer ingiustamente non lo fa).
Un'altra caratteristica opposta, come suggerisce il nome, è che gli elementi vengono visualizzati nella stessa linea, così ogni elemento seguirà il suo precedente. Se la linea è "riempita" completamente dagli elementi, gli elementi successivi verranno visualizzati nella riga sottostante.
Ecco una rappresentazione grafica:

La proprietà display:none è molto facile da spiegare: essa semplicemente non farà visualizzare l'elemento.

Ci sono una moltitudine di proprietà di visualizzazione come table, inline-block, ecc...

Il flusso di posizionamento

Con il posizionamento non si può non parlare di "flusso" (flow).
Il flusso nei CSS è il modo in cui gli elementi sono posizionati logicamente nel display.
Per esempio, se disattiviamo i CSS su questa pagina, si può vedere come gli elementi sono disposti originariamente (in un determinato ordine) ossia dall'alto verso il basso.

Posizionamento

Una delle proprietà più complesse del CSS.
Questo è vero sia per questioni legate al cross-browsing ma anche ad una denominazione ambigua.
Non è complessa (o comunque non facile da apprendere) la dichiarazione del posizionamento ma il modo in cui l'elemento interagisce con il contesto.
Il posizionamento varia anche in combinazione con la proprietà display utilizzata con esso.
Il modo in cui il posizionamento e la proprietà display interagiscono è il seguente:
position:static e position:relative possono essere entrambe display:block e display:inline, mentre position:absolute e position:fixed (e float) vengono sempre visualizzati come display:block.

Inizieramo con il posizionamento più facile, lo static.

Position: static

E' il posizionamento base e più semplice da comprendere.
Un elemento con position:static riempie tutto lo spazio di cui necessita (il suo contenuto).
La proprietà display (display:block o display:inline) dipende dal valore di default dell'elemento (ad esempio i div hanno display:block, mentre gli span hanno display:inline) oppure da ciò che si è specificato nel CSS.

Il offsetting (top, bottom, left e right) è ignorato.

Position: relative

Questa proprietà è simile al position:static con una sola ed importante differenza: l'elemento (con altezza e larghezza propri) reso a video non occupa lo spazio originariamente designato ad esso.
La proprietà top, bottom, left e right permettono di spostare l'elemento relativamente allo spazio designato.
Un elemento con position:relative top:20px e left:20px appare come segue:

La zona grigia è lo spazio designato originariamente all'elemento.

Il prossimo elemento del flusso verrà posizionato usando lo spazio designato dell'elemento precedente considerandolo come quello "reale".
In questo modo se si posiziona un div al di sotto dell'elemento della figura soprastante otterremo questo:

Position: absolute

Il posizionamento assoluto è completamente diverso da ciò che abbiamo visto fin'ora.
La più grande differenza è che l'elemento non fa più parte del "flusso". Ciò significa che non interagirerà in alcun modo con gli altri elementi.
Gli elementi circostanti si limitano a far finta che l'elemento posizionato in questo modo "non esista".

Le proprietà top, right, bottom e left hanno lo scopo di gestire l'offset rispetto al primo elemento padre che risulta essere posizionato in relative o absolute.
A meno che non siano presenti elementi posizionati con position:relative, position:fixed o position:absolute l'elemento radice è <html>.
Nelle specifiche ciò è chiamato "initial containing block" (ndt: "Blocco contenitore iniziale").

Un elemento posizionato in modo assoluto con top:20px e left:20px all'interno di un elemento posizionato relativamente verrà mostrato così:

Si possono avere alcuni problemi con il posizionamento assoluto: l'articolo di paul'OB li descrive molto bene.

Position: fixed

Fixed a causa del mancato supporto con Internet Explorer 6 risulta essere poco conosciuto.
Fixed fa esattamente la stessa cosa di position: absolute con una sola importante differenza: l'offset non prende come riferimento l'elemento genitore bensì il viewport della finestra del browser.
Ciò significa che l'elemento, mentre scrolliamo, rimane visibile e non si muove con il resto della pagina.

z-index

Un'altra proprietà che entra in gioco con il posizionamento è lo z-index.
Questa proprietà permette il controllo del livello di profondità degli elementi posizionati in absolute, fixed e relative.
Lo z-index applicato ad altri posizionamenti diversi da absolute, fixed e relative non porta ad alcun risultato.

Per capire lo z-index, è giusto dare rilevanza alle specifiche:

Nel CSS 2.1 ciascun box ha una posizione composta da 3 dimensioni. Oltre al posizionamento verticale ed orizzontale, gli elementi sono disposti lungo un'asse z uno davanti l'altro.

Ciò è chiamato "stacking" (ndt: pila) e l'insieme degli elementi impilati è chiamato "stacking context".
C'è da notare come ogni volta si dichiara uno z-index si crea un nuovo stacking context: ciò significa che ogni elemento contenuto nell'elemento corrente userà lo z-index del genitore come punto di partenza.
Spieghiamo meglio il concetto con del codice CSS:

e HTML:

Tutto ciò verrà visualizzato in questo modo:

Si può notare come nonostante .relativeblock2 abbia un valore di z-index elevato (50), stia comunque sotto a .absoluteblock2 che ha z-index 1: questo perchè .relativeblock1, con z-index 51, crea un nuovo stacking context dove lo z-index di .absoluteblock1 può essere visto come "51.1".
Per approfondimenti si consiglia di leggere l'articolo di Tim Kadlec oppure i test di Krijn Hoetmer.