In CSS, il controllo della posizione degli elementi è fondamentale per la creazione del layout della pagina. La proprietà position consente di specificare come un elemento dovrebbe essere posizionato nella pagina. In questa lezione vedremo i diversi valori della proprietà position e come usarli.
La proprietà position accetta cinque diversi valori:
static, segue il flusso normale della pagina.relative, spostato rispetto alla sua posizione originale.absolute, posizionato rispetto al contenitore più vicino.fixed, fisso rispetto alla finestra del browser.sticky, rimane attaccato ad un elemento durante lo scorrimento.Prima di approfondire questi valori, vediamo alcune proprietà importanti.
Quando usiamo i valori relative, absolute, fixed o sticky, possiamo utilizzare anche le proprietà top, right, bottom e left per spostare gli elementi. Queste proprietà accettano valori in diverse unità di misura come px, % (percentuale), em, ecc.
top specifica la posizione rispetto al margine superiore dell'elemento di riferimento.right specifica la posizione rispetto al margine destro dell'elemento di riferimento.bottom specifica la posizione rispetto al margine inferiore dell'elemento di riferimento.left specifica la posizione rispetto al margine sinistro dell'elemento di riferimento.Questo è il valore predefinito, ciò significa che anche se non inseriamo position, all'elemento verrà assegnato position:static. Gli elementi con position:static vengono posizionati nel normale flusso del documento, senza essere influito da altre proprietà di posizionamento come top, right, bottom, o left.
div {
position: static;
}Un elemento con position:relative viene posizionato nel flusso normale della pagina, ma è possibile spostarlo rispetto alla sua posizione originale usando le proprietà top, right, bottom, e left. Questo spostamento non influisce sul posizionamento degli altri elementi.
Ad esempio, questa immagine è spostata di 50px a destra:
<div><img src="parrot.png" height="150px"></div>
<style>
div {
border: 1px solid grey;
}
img {
position: relative;
left: 50px;
}
</style>Abbiamo aggiunto il bordo al <div> che contiene l'immagine per rendere evidente left:50px.
Puoi anche impostare un valore negativo per top, right, bottom, e left. In quel caso, viene posizionato nella direzione opposta a quella indicata. Ad esempio, left:50px posiziona l'elemento a 50px dal lato sinistro. Con left:-50px, l'elemento viene spostato a sinistra di 50px.
Un elemento con position:absolute viene rimosso dal normale flusso della pagina. Questo significa che gli altri elementi si comportano come se l'elemento con position:absolute non esistesse.
<div><img src="parrot.png" height="150px"></div>
<style>
div {
border: 1px solid grey;
height: 50px;
width: 150px;
}
img {
position: absolute;
opacity: 0.5;
}
</style>Nell'esempio, utilizziamo opacity:0.5 (che abbiamo visto nella lezione della visibilità degli elementi) per rendere trasparente l'immagine e vedere i bordi dell'elemento che la contiene. In questo caso, l'immagine non viene considerata all'interno della pagina. Infatti, se rimuoviamo width e height dal <div>, la dimensione dell'elemento sarebbe nulla e vedresti solo il bordo (oltre che l'immagine):
Si può anche scrivere sopra l'immagine!
Se impostiamo una posizione con valore absolute, possiamo utilizzare le proprietà di posizionamento (top, right, bottom, left). L'elemento con absolute è posizionato rispetto all'elemento che lo contiene, ma quest'ultimo deve avere un valore di position diverso da static. In genere, si usa relative.
Ad esempio, vogliamo inserire una freccia a destra di un pulsante. Ecco come possiamo fare:
<button>Pulsante di esempio <img src="freccia.png"></button>
<style>
button {
position: relative;
border: 1px solid lightgrey;
padding: 10px 50px 10px 20px;
border-radius: 10px;
background-color: whitesmoke;
}
img {
position: absolute;
right: 10px;
top: 9px;
}
</style>I colori LightGrey e WhiteSmoke nell'esempio sono quelli della lista dei colori HTML supportati.
Se l'elemento non è inserito in un altro con una position diversa da static, allora viene posizionato rispetto a <html>.
Un elemento con position:fixed viene rimosso dal normale flusso della pagina ed è posizionato rispetto alla finestra del browser. Rimane fisso quando si scorre la pagina.
Ecco un esempio (prova a scorrere):
L'elemento con position:fixed viene posizionato solo rispetto alla finestra del browser, anche se è all'interno di un altro elemento (con un qualsiasi valori di position).
div {
position: fixed;
bottom: 10px;
left: 10px;
}Nota: per funzionare, position:fixed ha sempre bisogno di almeno una proprietà di posizionamento (top, right, bottom, left).
Un elemento con position:sticky si comporta come relative finché non raggiunge un certo punto, in cui inizia a scorrere e si comporta come fixed. È spesso utilizzato per elementi che devono rimanere visibili mentre si scorre una sezione specifica della pagina.
Per comprendere meglio, prova a scorrere questa pagina:
Ad esempio, per far "fissare" l'elemento alla parte superiore della pagina (come si vede nell'esempio qui sopra), bisogna utilizzare position:fixed insieme a top:0:
div {
position: sticky;
top: 0;
}Nota: per funzionare, position:sticky ha sempre bisogno di almeno una proprietà di posizionamento (top, right, bottom, left).