CSS Position

Pagina di prova della proprietà css position che permette di posizionare un elemento in relazione ad un altro elemento o allo corpo stesso della pagina

Articolo completo sul display su css.FlepStudio.org

Ritorna alla lista delle pagine di prove css su Onsitus.it.

1. position: static;

Valore di default

position: static;

2. position: absolute;

L'elemento è tolto del flusso naturale della pagina e posizionato in relazione a l'elemento html o a un suo elemento genitore se lui-stesso a una posizione con un valore differente di static (relative o absolute).
Posizione aggiustata con le dichiarazione top, left, right e left in unità di misura o percentuale che rapresentano un punto di referimento fisso.

position: static;
position: absolute; top: 400px; left:500px;
Tolto del flusso e posizionato in relazione a l'elemento html (in alto a destra in questo esempio)

position: relative;
position: absolute; bottom: 10px; left:10px;
Tolto del flusso e posizionato in relazione a l'elemento genitore

3. position: relative;

L'elemento è posizionato relativamente al suo elemento genitore.
Posizione aggiustata con le dichiarazione top, left, right e left in unità di misura o percentuale in base alla posizione naturale del elemento.

position: relative; top: 20px; left: 20px;

position: relative; bottom: 20px; right: 20px;

4. display: position: fixed;

L'elemento è tolto del flusso naturale della pagina e prende un posizione fissa in base a l'elemento html e non è scrollabile con il resto della pagina
Posizione aggiustata con le dichiarazione top, left, right e left in unità di misura o percentuale che rapresentano un punto di referimento fisso.
NB: NON SUPPORTATO DA INTERNET EXPLORER 6 E INFERIORE. Per IE7, usare il doctype corretto.

position:fixed; bottom:0; right:50px;

position:fixed; top:0; right: 20px;