Position: static
Se nel precedente esempio non si capiva nulla, è per l’effetto di alcune proprietà, in particolare il position: absolute. Le cose sono un po’ più chiare se inseriamo tutti i div in contenitori, i quali vengono posizionati come relativi.
Questo è un div posizionato in maniera statica, cui è stato applicato un margine sinistro positivo di 30px
Questo è un div posizionato in maniera statica, cui è stato applicato uno spostamento sinistro positivo di 30px
Position: relative
I div vengono posizionati secondo le proprietà top, left, right e bottom a partire dal punto in cui compaiono in pagina
Questo è un div posizionato in maniera relativa, cui è stato applicato un margine sinistro positivo di 30px
Questo è un div posizionato in maniera relativa, cui è stato applicato uno spostamento sinistro positivo di 30px
Position: absolute
Questo è un div posizionato in maniera assoluta, cui è stato applicato un margine sinistro positivo di 30px
Questo è un div posizionato in maniera assoluta, cui è stato applicato uno spostamento sinistro positivo di 30px
Si noti che qui i due elementi sono stati estratti dal flusso del documento e si sovrappongono.
Position: fixed
Questo è un div posizionato in maniera assoluta, cui è stato applicato un margine sinistro positivo di 30px
Questo è un div posizionato in maniera assoluta, cui è stato applicato uno spostamento sinistro positivo di 30px
Ciò che segue un elemento assoluto, si posiziona al suo posto.