In CSS tra le tante proprietà a disposizione ce ne sono alcune davvero molto interessanti, tra queste io faccio rientrare le position. Quando si parla di position si fa riferimento all’omonima proprietà, la quale supporta cinque tipi diversi di posizioni, ognuna con caratteristiche ben specifiche.
position in CSS supporta i posizionamenti:
- statici
- relativi
- assoluti
- fissi
- sticky
Andiamo con ordine e vediamo quali sono le peculiarità di ogni posizione.
Posizione statica
La posizione statica è la meno entusiasmante delle cinque, perché è quella di default e quindi corrisponde alla posizione che l’elemento ha nel flusso normale del documento.
Questa position non è influenzata da altre proprietà come top, right, bottom e left.
Posizione relativa
La posizione relativa non si distingue tantissimo da static se non per una cosa fondamentale, è influenzata da top, right, bottom e left. Queste quattro proprietà permettono di spostare a piacimento l’elemento verso il basso, verso l’altro a sinistra e a destra in base al valore che viene passato che può essere positivo o negativo e con una delle unità di misura supportate da CSS viste in precedenza.
Un elemento in con position: relative occupa esattamente lo stesso posto che occuperebbe se fosse in posizione statica, ma possiamo spostarlo da tale posizione con quelle quattro proprietà menzionate in precedenza.
1p {
2 position: relative;
3 left: -30px;
4}Posizione assoluta
Il posizionamento assoluto è tale rispetto al primo elemento genitore con position diversa da static. Qualora non vi fossero elementi nella "genealogia" dell’elemento con una posizione diversa da quella statica allora si risalirebbe fino al blocco di contenimento iniziale, lo stesso che contiene l'elemento <html>.
Da tenere a mente è che un elemento in posizione assoluta viene rimosso dal flusso normale del documento, quindi eventuali elementi limitrofi si avvicineranno come se l’elemento in posizione assoluta non esista (cosa non del tutto errata in fondo).
1div {
2 position: absolute;
3 top: 0;
4 left: 0;
5}Il posizionamento fisso
Il funzionamento è identico alla posizione assoluta, ma con una differenza sostanziale. Il posizionamento fisso posiziona gli elementi rispetto alla porzione visibile del viewport. Hai presente quei tasti sempre visibili per chattare o tornare in alto nella pagina? Ecco quelli sono posizionati con position: fixed.
1div {
2 position: fixed;
3 bottom: 40px;
4 right: 40px;
5}Il posizionamento sticky
L’ultimo arrivato della famiglia delle position, sticky è un posizionamento ibrido. Permette ad un elemento di comportarsi come se fosse in posizione relativa, ma al momento dello scroll, superata una determinata soglia, diventerà fisso.
Con position: sticky possiamo quindi ottenere l’header fisso che in tanti richiedono nei propri siti web.
Quando sticky non c’era questo “effetto” lo si otteneva con JavaScript.
1header {
2 position: sticky;
3 top: 0;
4}Nel video il codice che ho scritto è il seguente:
1<dl>
2 <dt class="intestazione">A</dt>
3 <dt>Alice Adams (555-1234)</dt>
4 <dt class="intestazione">B</dt>
5 <dt>Bob Brown (555-5678)</dt>
6 <dt class="intestazione">C</dt>
7 <dt>Charlie Clark (555-9012)</dt>
8 <dt class="intestazione">D</dt>
9 <dt>Dave Davis (555-3456)</dt>
10 <dt class="intestazione">E</dt>
11 <dt>Emily Evans (555-7890)</dt>
12 <dt class="intestazione">F</dt>
13 <dt>Frank Ford (555-2345)</dt>
14 <dt class="intestazione">G</dt>
15 <dt>Grace Green (555-6789)</dt>
16 <dt class="intestazione">H</dt>
17 <dt>Henry Hill (555-0123)</dt>
18 <dt class="intestazione">I</dt>
19 <dt>Isabel Ingram (555-4567)</dt>
20 <dt class="intestazione">J</dt>
21 <dt>Jack Jackson (555-8901)</dt>
22 <dt class="intestazione">K</dt>
23 <dt>Kate King (555-2345)</dt>
24 <dt class="intestazione">L</dt>
25 <dt>Larry Lee (555-6789)</dt>
26 <dt class="intestazione">M</dt>
27 <dt>Mary Miller (555-0123)</dt>
28 <dt class="intestazione">N</dt>
29 <dt>Nancy Nelson (555-4567)</dt>
30 <dt class="intestazione">O</dt>
31 <dt>Oliver Olson (555-8901)</dt>
32 <dt class="intestazione">P</dt>
33 <dt>Paul Parker (555-2345)</dt>
34 <dt class="intestazione">Q</dt>
35 <dt>Quincy Quinn (555-6789)</dt>
36 <dt class="intestazione">R</dt>
37 <dt>Robert Ross (555-0123)</dt>
38 <dt class="intestazione">S</dt>
39 <dt>Samantha Scott (555-4567)</dt>
40 <dt class="intestazione">T</dt>
41 <dt>Tina Taylor (555-8901)</dt>
42 <dt class="intestazione">U</dt>
43 <dt>Ursula Underwood (555-2345)</dt>
44 <dt class="intestazione">V</dt>
45 <dt>Victor Vega (555-6789)</dt>
46 <dt class="intestazione">W</dt>
47 <dt>Wendy White (555-0123)</dt>
48 <dt class="intestazione">X</dt>
49 <dt>Xavier Xavier (555-4567)</dt>
50 <dt class="intestazione">Y</dt>
51 <dt>Yvonne Young (555-8901)</dt>
52 <dt class="intestazione">Z</dt>
53 <dt>Zachary Zane (555-2345)</dt>
54 </dl>Mentre per il CSS
1html {
2 font-family: 'Courier New', Courier, monospace;
3}
4
5body {
6 margin: 0;
7}
8
9dt {
10 padding: 24px;
11 border-bottom: 1px solid #ccc;
12}
13
14.intestazione {
15 font-weight: 700;
16 font-size: 1.5rem;
17 background-color: #333;
18 color: #fff;
19 position: sticky;
20 top: 84px;
21}
22
23header {
24 background-color: #fff;
25 padding: 24px;
26 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
27 position: sticky;
28 top: 0;
29 z-index: 1;
30}
31
32header h1 {
33 margin: 0;
34}Modificare l’ordine di visualizzazione
Con top, right, bottom e left possiamo ottenere un movimento bidimensionale, ma grazie alla proprietà z-index possiamo anche muovere gli elementi sull’asse delle z, un po’ come se fossero dei livelli di Photoshop, in maniera tale da decidere chi deve apparire prima e chi dopo.
La teoria dietro z-index
Forse usare il termine livello di Photoshop è improprio. In realtà non stiamo creando o lavorando con dei livelli, ma stiamo creando dei nuovi stacking context.
La creazione di questi contesti cambia l’ordine con la quale gli elementi vengono dipinti a video.
Prendiamo in considerazione il seguente schema:
Come si comporta il browser in questa situazione? Innanzitutto ci troviamo nella fase di painting quella dove il browser genera i vari bitmap che compongono la pagina web.
Per poter gestire le z-index vengono creati gli stacking context. Senza z-index gli elementi sarebbero stati renderizzati uno dopo l’altro e li avremmo visti entrambi nel viewport. Ma con gli stacking context a disposizione il browser si comporta in maniera differente.
Per prima cosa elabora la root box e disegna lo sfondo. Successivamente il browser attraversa il documento gli stacking context di livello più basso (il ramo di destra dello schema) e ne inizia il processo di painting.
Dopo di che attraverso gli stacking context più elevati (il ramo di destra dello schema) e dipinge anche quelli.
Lo schema si basa sul seguente HTML e CSS:
1<body>
2 <div class="item-1">Item 1</div>
3 <div class="item-2">Item 2</div>
4</body>1.item-1,
2.item-2 {
3 position: absolute;
4 width: 100px;
5 height: 100px;
6 top: 10px;
7 left: 10px;
8}
9
10.item-1 {
11 background-color: red;
12 z-index: 2;
13}
14
15.item-2 {
16 background-color: green;
17 z-index: 1;
18}Caricamento...
Diventiamo amici di penna? ✒️
Iscriviti alla newsletter per ricevere una mail ogni paio di settimane con le ultime novità, gli ultimi approfondimenti e gli ultimi corsi gratuiti puubblicati. Ogni tanto potrei scrivere qualcosa di commerciale, ma solo se mi autorizzi, altrimenti non ti disturberò oltre.
Se non ti piace la newsletter ti ricordo la community su Discord, dove puoi chiedere aiuto, fare domande e condividere le tue esperienze (ma soprattutto scambiare due meme con me). Ti aspetto!