Articolo originale: The CSS Position Property Explained with Examples

Per poter padroneggiare il CSS, c'è bisogno prima di comprendere i concetti base, ovvero le proprietà CSS e i loro valori.

In questo articolo ci focalizzeremo sulla proprietà CSS position. Impareremo i vari valori di questa proprietà ed il loro funzionamento. Partiamo!

Cos'è la proprietà CSS position?

La proprietà CSS position determina la posizione dell'elemento all'interno del documento. Questa proprietà lavora insieme alle proprietà left, right, top, bottom e z-index, per indicare la posizione finale di un elemento all'interno di una pagina.

Ci sono cinque valori che possiamo utilizzare con la proprietà position:  

  1. static
  2. relative
  3. absolute
  4. fixed  
  5. sticky

Analizziamoli uno alla volta.

Static

Questo è il valore predefinito per un elemento. L'elemento è posizionato seguendo il normale flusso del documento. Le proprietà left, right, top, bottom e z-index non possono modificare la posizione di un elemento che ha la proprietà position: static.

Utilizziamo un esempio per dimostrare che position: static non ha effetto sulla posizione di un elemento. Abbiamo tre div posizionati in un elemento contenitore. Utilizzeremo questo esempio per tutto l'articolo.  

<html>
    <body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>

            <div class="main-element">
                All eyes on me. I am the main element.
            </div>

            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

Aggiungiamo position: static insieme alle proprietà left e top al div con la classe main-element. Impostiamo anche uno stile diverso dagli altri div, in modo da distinguerli dall'elemento che abbiamo preso in considerazione.

.main-element {
    position: static;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.sibling-element {
    padding: 10px;
    background-color: #f2f2f2;
}

Questo è il risultato:

Hai notato che la posizione è sempre la stessa? Ciò conferma il fatto che le proprietà left e bottom non funzionano con un elemento con position: static.

Passiamo al prossimo valore.

Relative

Gli elementi con position: relative mantengono la loro posizione nel normale flusso del documento. In questo caso però, a differenza degli elementi con il valore static, le proprietà left, right, top, bottom e z-index possono modificare la posizione dell'elemento. Uno spostamento basato sui valori delle proprietà left, right, top e bottom, è applicato all'elemento relativamente a sé stesso.

Sostituiamo position: static con position: relative nel nostro esempio.

.main-element {
    position: relative;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

Possiamo notare che le proprietà left e bottom in questo caso modificano la posizione dell'elemento. Inoltre osserviamo il fatto che l'elemento rimanga nel normale flusso del documento, e lo spostamento si applica relativamente a sé stesso. È bene tenere a mente questa cosa nel momento in cui parleremo degli altri valori.

Absolute

Gli elementi con position: absolute hanno una posizione che dipende dal loro elemento contenitore. In questo caso, l'elemento viene rimosso dal normale flusso del documento, gli altri elementi si comporteranno come se non esistesse e per esso non viene creato alcuno spazio nella disposizione della pagina web. I valori di left, top, bottom e right determinano la posizione finale dell'elemento.

È bene notare che un elemento con position: absolute si posiziona relativamente al primo elemento non avente position: static che lo contiene.

Se l'elemento genitore più prossimo non ha una posizione specificata,  il nostro elemento si rivolgerà al genitore successivo, fino a risalire all'elemento <html>, in caso non ci siano genitori che hanno la proprietà position specificata.

Torniamo al nostro esempio. In questo caso, cambiamo la proprietà position dell'elemento main-element in position: absolute. Impostiamo anche per il contenitore una posizione relativa, in modo che il nostro elemento non si disponga relativamente all'elemento <html>.

.main-element {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

.sibling-element {
    background: #f2f2f2;
    padding: 10px;
    border: 1px solid #81adc8;
}

Ecco il risultato.

Puoi notare come non è stato creato alcuno spazio nel documento per l'elemento, ma adesso è posizionato relativamente al genitore. È bene prendere nota di questa cose, prima di passare al prossimo valore.

Fixed

Elementi con la proprietà position impostata su fixed, hanno un comportamento simile agli elementi con il valore absolute ma, a differenza di quest'ultimi, la loro posizione è sempre relativa all'elemento <html>.

Si può notare che gli elementi con una posizione fissa non si muovono, anche se si scorre verso il basso nella pagina. La loro posizione è fissata sullo schermo.

.main-element {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: yellow;
    padding: 10px;
}

html {
    height: 800px;
}

In questo caso l'elemento è posizionato relativamente all'elemento <html>. Prova a scorre in basso per osservare che l'elemento è fissato sullo schermo.

Passiamo all'ultimo valore.

Sticky

position: sticky è una combinazione di position: relative e position: fixed. Si comporta come un elemento posizionato relativamente fino ad un certo punto nello scorrimento della pagina, ma oltre questo punto si comporta invece come un elemento fisso. Non preoccuparti se non riesci a capire cosa ciò voglia dire, l'esempio ti aiuterà a capirlo meglio.

.main-element {
    position: sticky;
    top: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 800px;
    padding: 50px 10px;
    background-color: #81adc8;
}

Scorri in basso nella finestra per vedere il risultato finale. Puoi vedere che si comporta come un elemento relativo fino ad un certo punto sullo schermo,  top: 10px e poi come un elemento fisso.

Conclusioni

Whooho! È stata proprio una bella avventura. Ma spero davvero che questo articolo ti abbia aiutato a capire la proprietà CSS position e il suo funzionamento.

Sentiti libero di sperimentare con gli esempi, in caso non riuscissi a capire qualunque di questi concetti. Puoi cambiare i valori e osservare la differenza o, ancora meglio, puoi provare a utilizzare la proprietà position in un tuo progetto personale.

Ricorda che migliorare con il CSS comporta pratica costante, quindi continua a fare pratica e migliorerai.

Vuoi ricevere una notifica per ogni mio nuovo articolo? Clicca qui.