La proprietà position all’interno del linguaggio CSS serve per modificare il posizionamento di un elemento nella nostra pagina web; tuttavia, da sola non basta a raggiungere l’obiettivo: pertanto, viene utilizzata con altre proprietà direzionali : top,right,bottom,left e z-index.
In totale, la proprietà position ha 5 possibili valori:
- static: ogni elemento ha una posizione statica per impostazione predefinita (si tratta, quindi, del valore di default). L’elemento, dunque, si atterrà al normale flusso della pagina: se è stato impostato un indice di posizione a sinistra/destra/alto/basso/z, non ci sarà alcun effetto su quell’elemento. Perchè la posizione cambi il valore va cambiato.
- relative: la posizione originale di un elemento rimane nel flusso del documento, proprio come il valore statico. Ma ora gli indici left/right/top/bottom/z-index funzioneranno. Le proprietà posizionali “spostano” l’elemento dalla posizione originale in quella direzione, lasciando, però, la posizione originale occupata e sovrapponendolo agli altri elementi della pagina.
- absolute: l’elemento viene rimosso dal flusso del documento e viene riposizionato secondo ordini. Gli altri elementi si comporteranno come se, nello spazio d’origine, l’elemento non ci fosse più, mentre tutte le altre proprietà posizionali funzioneranno su di esso.
- fixed: l’elemento viene rimosso dal flusso del documento come gli elementi posizionati in modo absolute. In realtà si comportano quasi allo stesso modo, ad esclusione del fatto che gli elementi posizionati in modo fixed sono sempre relativi alla finestra del browser, non a un particolare genitore, e non sono influenzati dallo scorrimento. Per intenderci, rimangono “fissi” – appunto – nella posizione che gli diamo.
- sticky: l’elemento viene trattato come nel caso del valore “relative”, finché la posizione di scorrimento della finestra di visualizzazione non raggiunge una soglia specificata; a quel punto, l’elemento assume una posizione fissa in cui gli viene detto di rimanere.
Confuso? Non preoccuparti! Vediamo degli esempi pratici per schiarirti le idee.
CSS Position Relative
CSS:
.element {
position: relative;
top: 20px;
}
HTML:
<h1 class=”element”>Corso di coding </h1> <h2>Come diventare uno sviluppatore web </h2>
Rispetto alla sua posizione originale, l’elemento sopra sarà ora spostato in basso di 20px.
Possiamo notare come il titolo, adesso, si sia sovrapposto al sottotitolo e, soprattutto, lo spazio originariamente occupato dal titolo sia rimasto occupato.
CSS Position Absolute
Struttura HTML:
<div class="parent"> Elemento Padre <div class="element">Elemento Figlio </div> </div>
CSS:
.element {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
Se un elemento figlio ha un valore assoluto, l’elemento genitore si comporterà come se il figlio non ci fosse affatto.
Quando cerchiamo di impostare altri valori come “left”, “bottom” e “right”, scopriremo che l’elemento figlio non risponde alle dimensioni del suo genitore, ma a quelle del documento.
Per fare in modo che l’elemento figlio sia posizionato in modo assoluto rispetto all’elemento genitore, dobbiamo impostare la position dell’elemento padre in modo tale che sia diversa da static:
.parent {
position: relative;
}
Proprietà come left, right, bottom e top si riferiscono, adesso, all’elemento genitore, per cui ora vedremo l’elemento figlio posizionato proprio alla base dell’elemento genitore.
Proviamo a dargli uno stile:
.parent {
color: white;
padding: 70px;
position: relative;
background-color: #0074d9;
}
.element {
background-color: rgba(0,0,0,.3);
padding: 20px;
color: rgba(255,255,255,.4);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Come puoi vedere provando questo codice, tutto quello che ti abbiamo illustrato è stato effettivamente realizzato.
CSS Position Fixed
Il valore “fixed” è simile a quello “absolute”, in quanto può aiutare a posizionare un elemento in qualsiasi punto relativo alla finestra: infatti, l’elemento con position fixed non è influenzato dallo scorrimento della pagina.
Un esempio classico di elemento con position fixed è la navbar che scorre con la pagina, o il classico bottone della chat posizionato in basso a destra nella pagina.
L’HTML:
<div class="navbar">Navbar</div>
Il CSS:
.navbar {
background-color: #40a6ff;
padding: 20px;
color: rgba(255,255,255,0.9);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
CSS Position Sticky
Il valore “sticky” è un compromesso tra i valori “relative” e “fixed”.
Che cosa fa? Permette di posizionare un elemento rispetto a qualsiasi punto del documento e poi, una volta che l’utente ha superato un certo punto della finestra, di fissare la posizione dell’elemento in modo che rimanga visualizzato in modo persistente come un elemento con una position fixed.
Vediamo un esempio.
La struttura HTML:
<header> <h1>Products</h1> </header> <nav class="nav-sticky"> <ul> <li><a href="#hoses">Hoses</a></li> <li><a href="#rakes">Rakes</a></li> <li><a href="#shovels">Shovels</a></li> </ul> </nav> <article> Lorem ipsum dolor sit amet… </article>
Il CSS:
header {
background: hotpink;
color: #fff;
display: flex;
height: 70vh;
justify-content: center;
align-items: center;
}
.nav-sticky {
position: sticky;
top: 0px;
z-index: 1000;
}
article {
background-color : pink;
font-size: 2rem;
height: 200vh;
}
Nell’ esempio, l’elemento sarà posizionato relativamente fino a quando la posizione di scorrimento della finestra di visualizzazione raggiungerà un punto in cui l’elemento si troverà a 50px dalla parte superiore della finestra di visualizzazione. A quel punto, l’elemento diventa “appiccicoso” e rimane in una posizione fissa a 50px dalla parte superiore dello schermo.
Z Index CSS
Sbizzarrendoci con le varie position, potremmo incorrere in qualche problema di sovrapposizione degli elementi. Per risolvere questi problemi dobbiamo utilizzare la proprietà z-index che modifica la posizione sull’asse z, ovvero la profondità.
Negli esempi precedenti abbiamo, infatti, inserito nelle nostre navbar la proprietà z-index con valore di 1000 in modo tale che nessun altro elemento si sovrapponesse alla nostra navbar. Uno z-index maggiore, implicherà che il nostro elemento risulti in primo piano rispetto ad uno con z-index minore, che risulterà sottostante.
