positioning

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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.