8-9-10 posizioni
Se non viene specificato alcun attributo, la posizione di ogni elemento è static .
<span style="position: static">Sono una stringa</span>
Ovviamente non è necessario specificarla. Mentre se voglio cambiare il tipo di position posso metterla relativa.
Con la position relative posso spostare l’elemento di un quantitativo, chiamato offset, che posso decidere, a partire dalla sua posizione static.
<span style="position: relative; top: 100px;">Sono una stringa</span>
Questo span sarà più in basso, rispetto alla sua posizione static, di 100 pixel . L’offset che vado ad impostare, tramite le proprietà top, bottom, left, right, non influenza in nessuna maniera gli altri elementi html della pagina, essi si comportano come se l’elemento fosse static , lasciando vuoto il suo spazio originale.
<span style="position: relative; top: 100px; left: 300px;">Sono una stringa</span>
Lo span si sposta di 100 pixel in basso e 300 pixel verso destra.
<span style="position: relative; top: -50px; left: -20px;">Sono una stringa</span>
col valore negativo si sposta si 50 pixel verso l’alto e 20 verso sinistra.
<span style="position: relative; top: 150px; left: 100px;"><img src="quadri.png" width="100px"></span>
In questo caso anche l’immagine si sposta 150 pixel in basso e 100 pixel dal margine sinistro.
Il position relative è molto utile per effettuare uno spostamento di un piccolo div, per esempio, ma rischia di complicarci la vita se dobbiamo posizionare più blocchi, magari di grandi dimensioni, perdendo di vista le loro reali posizioni statiche, che però vengono calcolate dagli altri elementi html. Inoltre la position relative soffre dei ridimensionamenti della pagina e delle differenti risoluzioni. Quindi per dei div da mettere a sinistra e/o a destra, sarebbe impensabile utilizzare tale tecnica.
Ci viene in aiuto in questo caso la proprietà float che permette di far fluttuare gli elementi a destra o a sinistra del blocco che lo contiene e occuperanno realmente le posizioni in cui vengono spostati, anche nei confronti degli altri tag html che sentiranno la loro reale presenza.
<div style="float: left">
Gli elementi successivi saranno posizionati alla sua destra (o sinistra se il float: right).
Per annullare l’effetto float dei div basta usare la proprietà clear che può essere left, right o entrambe (both)
<div style="clear: both">
e magicamente il flusso del div riprende la sua normalità.
Un’altro tipo di posizionamento, simile al relative, che calcola l’offset dalla posizione iniziale, ma che non tiene conto della posizione di partenza che quell’elemento occuperebbe, ovvero che toglie dal normale flusso della pagina l’elemento spostato, in modo che non rimarrebbe del vuoto occupato da quell’elemento, è il position absolute . Il posizionamento assoluto calcola l’offset a partire dal primo elemento genitore che non ha la position static . Qualora non sia presente nessun ‘elemento che lo contiene con posizione diversa da static, il conteggio viene fatto sul body, quindi dal primo punto in alto a destra. Per migliorare i calcoli un buon metodo è cambiare il position di un elemento vicino mettendo il suo offset a zero, oppure creare un nuovo elemento relative con offset zero.
Il più grande vantaggio del posizionamento absolute è quello di non costringerci a tener conto del susseguirsi del flusso degli elementi, perché ogni elemento può essere spostato in modo absolute, non va ad incidere su altri, quindi posso inserire elementi che andrebbero posizionati dopo, prima nel codice, avvantaggiando per esempio quei lettori browser per non vedenti, e poi spostare a mio piacimento la posizione di tale elemento . Inoltre questa tecnica può favorire i motori di ricerca.
Gli svantaggi sono i possibili errori di sovra posizionamento degli elementi.
Ultimo tipo di position è quello fixed che è come quello absolute, ma il box di riferimento è sempre la finestra del browser , quindi lo spostamento è dal primo punto in alto a sinistra. La differenza tra i due (absolute e fixed) è che se scorro in verticale la finestra il mio punto di riferimento del box genitore può cambiare e quindi l’elemento absolute può spostarsi, mentre nel fixed no, rimane fisso.