css-position-thumbnail

Position è una delle proprietà più importanti, questa proprietà ci da la possibilità di disporre gli elementi sullo schermo. In questo tutorial tratteremo tutti e cinque i valori che una position può avere: static, relative, absolute, fixed e sticky. Infine trattermo anche un’altra proprietà spesso usata e relativa all’argomento: z-index.

Ogni volta che spostiamo un elemento lo facciamo rispetto a qualcosa. Per spostarlo usiamo quattro proprietà: top, right, bottom e left. Il valore che diamo a queste proprietà può essere sia positivo che negativo . Se diamo un valore positivo l’elemeto si sposterà verso l’interno, se ne diamo uno negativo si sposterà verso l’esterno.

Static

Di default tutti gli elementi sullo schermo sono in position static, statici, seguono il corso naturale, e vengono mostrati dall’alto verso il basso. Quando un elemento si trova in posizione static le proprietà top, right, bottom e left non possono essere applicate.

Relative

Con position relative possiamo  spostare gli elementi dalla propria posizione originale. Se ad esempio vogliamo spostare l’elemento in basso e a destra di 100px useremo il seguente codice:

element {
postion: relative;
top: 100px;
left: 100px;
}

L’elemento si muove di 100px dall’alto verso il basso e di 100px da sinistra verso destra.

Absolute

Position absolute fa riferimento al primo elemento con la proprietà position nel quale è contenuto. Se non ha nessuno elemento parent con la proprietà position allora farà riferimento al documento. Quando applichiamo position absolute l’elemento si stacca dagli altri lasciando uno spazio vuoto che viene sostitutio dall’elemento che lo segue.

Position Relative e Positon Absolute a confronto con elementi visti di profilo

Nell’esempio sopra possiamo vedere come un elemento si comporta quando viene applicata position relative e quando viene applicata position absolute. In entrambi i casi position viene applicata all’elemento giallo. Con relative l’elemento si stacca dal documento ma il suo spazio originale non viene occupato dell’elemento che lo segue. Con absolute lo spazio dell’elemento giallo viene occupato dell’elemento blu che lo segue.

Fixed

Position Fixed è probabilmete quella più semplice da capire, postion fixed fa sempre e solo riferimeto alla viewport. L’elemento facendo riferimento alla viewport rimarrà sempre fisso sullo schermo anche quando si scorre verso il basso. Si comporta come absolute, quando ad un elemento viene applicata postition fixed si stacca dal documento e lascia spazio a quello che lo segue.  Postion fixed viene usata per le icone tipo Facebook Messenger o WhatsApp, o anche nei back to top buttons, quei bottoni con la freccia verso l’alto che riportano alla testa della pagina.

Sticky

Position Sticky è una sorta di mix fra relative e fixed, l’elemento si comporta come in position relative finchè l’utente scorrendo verso il basso non raggiunge un determinato punto, allora allora da relative passa a fixed.

Z-index

Posizionare gli elementi è molto utile, ma rimuovere un elemento dal document flow può creare dei problemi, ad esempio potremo coprire altri elementi della pagina innavertitamente. Ed è qui che entra in aiuto z-index. Z fa riferimento alla dimenzione Z dell’asse cartsiano, quello che da profondità.

Come visto nella grafica precentemente quando aggiungiamo la posizione ad un elemento questo si stacca dal document flow e va a coprire gli altri elementi, questa situazione si prende il nome di stacking contexts, dove gli elementi si sovrappongono, dall’inglese stack che significa pila o accattastamento.

Prendendo come esempio la grafica precedente, se voglio mettere l’elemento blu sopra quello giallo userò il seguente codice:

elementoBlu {
z-index: 1;
}

Per avere pagine web facili da controllare e mantenibili sarebbe da usare la propriatà position il meno possibile, come abbiamo visto crea disordine nel layout, quindi meno si usa e meglio è. Questi concetti sono difficili da spiegare senza dimastrazione pratiche, per avere un quadro generale più chiaro guarda il seguente video.

Guarda il video:

Articoli simili