Position: static
Tutti gli elementi html hanno una proprietà di posizionamento predefinita che è position: static. Secondo questa proprietà, gli elementi si dispongono semplicemente secondo il flusso del documento. Il primo elemento nel codice in cima al rendering, il secondo di seguito, eccetera. Modificando position è possibile spostare questi elementi, disponendoli come se fossero elementi che navigano sopra il resto della pagina.
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.