Oggi vedremo un attributo CSS fondamentale per fare il layout del nostro sito, ovvero l’attributo “position”.

L’attributo position serve a specificare il ruolo di ciascun elemento nel flusso della pagina, ed il suo posizionamento all’interno di essa.

Esistono diversi valori per l’attributo position e sono i seguenti:

  • Static: è il valore di default, quindi anche se non dovessimo specificare il posizionamento dell’elemento il nostro browser imposterà il valore static. Un elemento static appartiene al flusso della pagina ed occupa la posizione “naturale”, ma non può essere spostato.
  • Relative: è simile allo static perché fa parte del flusso della pagina, ma in più con il relative è possibile aggiungere dei valori extra (come ad esempio top e left che servono per spostare l’elemento dalla sua posizione naturale).
  • Fixed: in questo caso l’elemento verrà estratto dal flusso della pagina (come se “fluttuasse” in un’altra dimensione). La particolarità del fixed è che i riferimenti di posizione top, left, bottom e right saranno valutati rispetto alla finestra del browser e l’elemento resterà fisso anche laddove si verificasse lo scrolling della pagina.
  • Absolute (il più cattivo): come il fixed si trova fuori dal flusso della pagina, ma a differenza di fixed il suo posizionamento ha come riferimento il primo elemento parente non static.

Per tutti i casi gli esempi qui sotto saranno di grande aiuto.

Facciamo un primo esempio in cui una pagina ha 4 div. Il primo (quello con sfondo rosino) non ha alcun valore di position pertanto è come se avesse “position: static;”. Il secondo (sfondo verdino) ha il valore “position: static;” esplicitato. Il terzo (sfondo azzurro) ha un valore “position: relative;”. Il quarto (ovvero quello giallo) ha “position: static;”.


1

La pagina apparentemente si comporta come in tutti gli esempi che abbiamo considerato in precedenza in questi tutorials. Ora proviamo a settare le proprietà “top” e “left” per il blocco che ha position “relative”, e vediamo sotto quello che succede.


1

Come potete vedere, il blocco che ha position relative si è spostato leggermente in basso (di 100 pixels per la precisione) e a destra di 30 pixels. Se state attenti, vedrete che l’elemento è rimasto “nel flusso della pagina”, ovvero, nonostante si trovi più in basso, continua ad occupare il posto che avrebbe dovuto avere qualora il suo posizionamento fosse stato di tipo static! Infatti, potete vedere l’area del suo posto originale rimasta bianca.

I valori “fixed” ed “absolute” si comportano in maniera molto diversa rispetto a quelli static e relative. In particolare, “fixed” ed “absolute” rimuovono gli elementi HTML dal flusso della pagina, facendo quasi in modo che appartengano “ad un altra dimensione”.

Il valore “fixed” ha come punto di riferimento la finestra del browser dell’utente. Anche se si dovesse fare lo “scrolling” della pagina web, l’elemento “fixed” non cambierà di norma la sua posizione, come mostrato sotto:


1

L’elemento absolute si comporta come un fixed, con la differenza che in realtà si muove con la pagina laddove venga fatto uno scrolling. La particolarità (e difficoltà) del position “absolute” è determinare il riferimento rispetto al quale la posizione dell’elemento viene definita. La regola è la seguente:

Un elemento con position absolute ha come riferimento il primo parente non static.


1

Come potete notare dall’esempio gli elementi in arancione sono absolute. Il loro riferimento è il div “cap1” che ha position relative. Al contrario, il div verde è finito in alto a destra dal momento che il div “cap2” aveva position static.


Vi sarete accorti che fare il layout non è una passeggiata; vedremo nei prossimi articoli un barbatrucco che sarà estremamente utile per renderci più facile la vita!!! Il trucchetto si chiama “griglia responsive”… Twitter Bootstrap ne è un esempio.




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.