positioning (chiarimento)

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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.