CSS POSITION: posizione d’un elemento in modo statico, assoluto, relativo e fisso

La proprietà  css position con i suoi valori static, absolute, relative e fixed permette di posizionare un elemento in relazione ad un altro elemento o allo corpo stesso della pagina.

Con l’uso di semplici esempi online, vederemo la proprietà CSS position, l’applicazione di questi 4 differenti valori con l’uso delle dichiarazione top (alto), bottom (basso), left (sinistra) e right (destra) per posizionare più precisamente l’elemento con unità di misure o percentuale.

Per iniziare, vediamo quale sarebbe il flusso normale della pagina con l’uso di 3 div a bordi colorati:

• uno giallo (‘yellow’)
• uno rosso (‘red’) a quale, di seguito, impostiamo le diverse valore della proprietà position
• uno nero (‘black’) che servirà di div ‘contenitore’ a ‘red’

L’HTML e CSS di base:

<div style="width:300px; height: 100px; border: 1px solid yellow;"></div>
<div style="width:300px; height: 300px; border: 1px solid black;"><div style="width:200px; height: 200px; border: 1px solid red;"></div></div>

Il risultato:

1. position: static;

Il valore static (statico) è il valore di default e sarebbe uguale alla posizione dell’elemento nell’esempio del flusso normale.

L’elemento ‘statico’ non può essere mosso della sua posizione e ignora le declarazione top, bottom, left e right.

2. position: absolute;

Il valore absolute (assoluto) permette di rimuovere l’elemento dello flusso normale della pagina per potere posizionarlo con le declarazione top, bottom, left e right in unità di misura.

L’elemento assoluto è posizionato in rapporto al suo div ‘contenitore’ solo se lui stesso ha la sua proprietà position impostato con un valore altro che ‘static’.

Se no, l’elemento in posizione assoluta si posiziona in base a l’elemento HTML (normalemente, l’area visiva della finestra del browser) sempre in alto a sinistra.

Esempio 1 position absolute:

‘red’ con position: absolute; top: 0; right: 50px; contenuto in ‘black’ senza posizione specificata.

L’elemento ‘red’ è tolto del flusso naturale e si posiziona in alto a 50px a destra in base alla finestra del browser. (guardate in alto a destra di questa pagina)

Il risultato sarebbe lo stesso se div ‘red’ non era contenuto in div ‘black’, visto che non abbiamo specificato una posizione a ‘black’ chi per default ha sua posizione ‘static’.

Esempio 2 position absolute:

‘red’ con position: absolute; top: 50px; left: 10px; contenuto in ‘black’ con position: relative;.

Questa volta, l’elemento ‘red’ si posiziona a 50px in alto e 10px a sinistra in base al suo div contenitore ‘black’ visto che, per questo esempio, abbiamo specificato una posizione relative a ‘black’.

Esempio 3 position absolute:

Lo stesso che esempio 2 ma invece di top: 50px; left: 10px;, usiamo bottom: 20px; right: 10px;.

L’elemento ‘red’ si posiziona a 20 px in basso e 10px a destra in base al suo contenitore.

3. position: relative;

Il valore relative (relativo) permette di posizionare l’elemento in base al suo div ‘contenitore’.

Contrariamente alla posizione assoluta, le declarazione top, bottom, left e right non rappresentano punti fissi di posizionamento ma sono basate sulla posizione naturale dell’elemento.

Esempio 1 position relative:

‘red’ con position: relative; top: 20px; left: 20px; contenuto in ‘black’.

L’elemento ‘red’ si sposta verso il basso a sinistra aggiungendo 20px alla posizione iniziale delle sue parte superiore e sinistra.

Esempio 2 position relative:

Lo stesso che esempio 1 ma invece di top: 20px;, usiamo bottom: 20px; right: 20px;.

L’elemento ‘red’ si sposta verso l’alto aggiungendo 20px alla posizione iniziale della sua parte inferiore e verso la sinistra aggiungendo 20px alla posizione iniziale della sua parte destra.

4. position: fixed;

NB: NON SUPPORTATO DA INTERNET EXPLORER 6 E INFERIORE. Per IE7, usare il doctype corretto.

Come per la posizione assoluta, il valore fixed (fisso) permette di rimuovere l’elemento del flusso normale della pagina per potere posizionarlo con le declarazione top, bottom, left e right.

La differenza tra di loro è che l’elemento fisso si posiziona sempre in base a l’elemento HTML (l’area visiva della finestra del browser) in alto a sinistra e mai ad un suo eventuale elemento ‘contenitore’.

Essendo fisso, questo elemento rimanerà sempre alla sua posizione anche se il resto della pagina è scorrevole.

Un elemento ‘fixed’ può essere riposizionato usando top, bottom, left, right (come per ‘absolute’) ricordandosi che sarà sempre in relazione alla finestra browser.

Esempio 1 position fixed:

‘red’ con position: fixed; top: 20px; left: 0; contenuto in ‘black’.

L’elemento ‘red’ è tolto del flusso naturale della pagina e si posiziona a 20px in alto a sinistra in base alla finestra del browser.
Il risultato sarebbe lo stesso se div ‘red’ non era contenuto in div
‘black’, visto che è sempre posizionato in base alle misure della finestra del browser.

Esempio 2 position fixed:

Per questo secondo esempio, tolgo ‘red’ con position: fixed; bottom: 0; left: 0; del suo div contenitore ‘black’.

L’HTML e CSS usato:

<div style="width:300px;height:100px;border:1px solid yellow;"></div>
<div style="width:300px;height: 300px;border: 1px solid black;"></div>
<div style="width:200px; height: 200px; border: 1px solid red; position:fixed; bottom:0; left:0;">position:fixed;bottom:0;right:0;</div>

Il risultato:

L’elemento ‘red’ è tolto del flusso naturale della pagina e si posiziona in basso a sinistra in base alla finestra del browser e rimane in una posizione fissa anche quando il resto del corpo della pagine è ‘scrollata’.

This article in english >>