La proprietà Position stabilisce la modalità di posizionamento degli elementi ovvero la modalità con cui un elemento deve posizionarsi nel documento rispetto gli altri elementi.
I valori con cui è possibile definire la modalità di posizionamento sono quattro:
p{
postion: static;
}
È il valore di default, quello predefinito per tutti gli elementi non posizionati secondo un altro metodo
p{
postion: relative;
}
Un elemento viene posizionato in relazione (al suo box contenitore) o più semplicemente alla sua posizione di partenza.
In sostanza con il posizionamento relativo andremo a modificare la posizione naturale di un elemento traslandola attraverso l’uso di top, left, bottom o right in relaziona la suo contenitore che funge da ancora/segnaposto.
p{
postion: absolute;
}
L’elemento viene rimosso dal flusso del documento (come avveniva per la proprietà float) ed è posizionato in maniera assoluta in base ai valori forniti con le proprietà top, left, bottom o right.
Il suo posizionamento è in relazione al suo container (box contenitore), ovvero dal suo antennato che abbia valore diverso da static.
Se tale elemento non esiste il posizionamento assoluto avviene in base all’elemento radice html, che coincide con l’area del browser che contiene il documento e che ha inizio dall’angolo superiore sinistro, in sostanza all'angolo in alto a sinistra del viewport.
p{
position: fixed;
}
Come per absolute, l'elemento viene sottratto al normale flusso del documento ed il suo box contenitore è sempre la viewport.
Un box posizionato con fixed non scorre con il resto del documento ma rimane fisso al suo posto.
p{
position: sticky;
}
Del tutto simile a fixed con l'unica differenza che una volta raggiunta la parte alta del viewport esso si ancora e rimane fisso in posizione anche continuando scorrendo tutto il contenuto della pagina.