CSS/Posizionamento

I CSS permettono di posizionare all'interno di una pagina oggetti che varino o restino fissi indipendentemente dalla dimensione in cui viene visualizzata la pagina e/o allo scorrere di questa.

Nella pagina, un elemento può essere posizionato secondo tre modi differenti:

• seguendo il normale andamento della pagina previsto dall'HTML
• senza alcun legame con il resto del flusso degli elementi
• allineandosi in modo tale che gli elementi si dispongano al lato (questa tecnica, chiamata in gergo tecnico floating, è simile al funzionamento dell'attributo align delle immagini)

Posizionarsi relativamente agli altri elementi della pagina

Per posizionare un elemento rispetto agli elementi della pagina secondo quanto previsto dal puro HTML, usiamo la proprietà position con questi valori:

• static (valore di default per quasi tutti gli oggetti HTML)
• relative: l'elemento è posizionato seguendo il normale flusso degli elementi nella pagina, tramite l'uso di quattro proprietà (left, right, top e bottom) che assumono come valore una grandezza e specificano la distanza (positiva o negativa) dell'elemento rispetto alla posizione che questo dovrebbe occupare normalmente nella pagina. Ad esempio:

 b {position: relative; top: -5px;}

Con questo codice, tutti gli elementi bold appariranno spostati di 5 pixel verso l'alto rispetto alla linea del paragrafo.
In particolare:

• top indica la distanza del bordo superiore dell'oggetto dal bordo superiore dell'elemento in cui è contenuto
• bottom indica la distanza del bordo inferiore dell'oggetto dal bordo inferiore dell'elemento in cui è contenuto
• left indica la distanza del bordo sinistro dell'oggetto dal bordo sinistro dell'elemento in cui è contenuto
• right indica la distanza tra il bordo destro dell'oggetto dal bordo destro dell'elemento in cui è contenuto

Posizionamento assoluto e fisso

Per posizionamento assoluto (dal latino ab solutum, sciolto dal resto) o fisso si intende un posizionamento che non segue il flusso degli elementi. È fissato tramite la proprietà position con l'uso dei valori:

• absolute: l'elemento è posizionato rispetto al suo blocco contenitore (la pagina o un altro elemento block-level a sua volta posizionato con il valore della medesima proprietà diverso da static) tramite le proprietà left, right, top e bottom. L'elemento risulterà quindi legato allo scorrere della pagina
• fixed: l'elemento è posizionato rispetto alla finestra sempre tramite le quattro proprietà left, right, top e bottom e non è legato allo scorrimento della pagina. Ad esempio:

  div.bann {
  position: fixed;
  bottom: 0px;
  right: 0px;
}

mostra l'elemento fisso nell'angolo in basso a destra dello schermo (può servire, ad esempio, per la creazione di banner o simili)

Usare il floating

Il floating è una tecnica CSS che, tramite la proprietà float, permette agli elementi HTML di allinearsi a destra o a sinistra della pagina (o dell'elemento contenitore). La caratteristica più interessante è però la possibilità che gli elementi della pagina scorrano a destra o a sinistra dell'oggetto in questione. Il funzionamento è analogo a quello della proprietà align dell'elemento HTML img. Può assumere i valori left, right e none. Vediamo due esempi:

Questo elemento div è flottante a sinistra (float: left;) e il paragrafo si dispone alla sua destra

Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni... (da I promessi sposi, capitolo primo, A. Manzoni)

Questo elemento div non è flottante (float: none;) e il paragrafo non si dispone alla sua destra

Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni... (da I promessi sposi, capitolo primo, A. Manzoni)

Vediamo alcuni dettagli su questa tecnica:

• il floating può essere usato solo su elementi con una larghezza fissa (impostata dalla proprietà width oppure, ad esempio per le immagini, dalle dimensioni in pixel del file di origine)
• la proprietà float non viene considerata se l'elemento ha un posizionamento assoluto o fisso
• gli elementi flottanti diventano necessariamente elementi block.
• gli elementi flottanti vengono automaticamente estratti dal flusso della pagina: questo significa che un elemento di tipo blocco che contenga elementi flottanti risulta in realtà vuoto.

La proprietà clear

La proprietà clear sposta l'elemento a cui viene applicata sotto a tutti gli elementi flottanti dal lato specificato. Può assumere i valori:

• none: non viene effettuato alcuno spostamento
• left o right: l'elemento viene spostato sotto a tutti gli elementi floattanti a destra o a sinistra
• both: vengono considerati tutti gli elementi flottanti sia a destra sia a sinistra.

Vediamo un esempio:

Questo elemento div è flottante a sinistra (float: left;) e il paragrafo si dispone alla sua destra

Questo è un paragrafo che si dispone attorno al div flottante

Usando la proprietà clear questo paragrafo va invece a capo rispetto al div.
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni... (da I promessi sposi, capitolo primo, A. Manzoni)

In questo caso il paragrafo qui a fianco, invece di disporsi a destra del blocco, si dispone allineandosi con il suo lato inferiore: ciò è causato dall'uso della dichiarazione CSS clear: left. L'effetto è simile a quello del blocco senza floating ma è stato ottenuto con due modalità differenti. Ovviamente la proprietà clear risulta comodo con molti elementi flottanti nella pagina.
La proprietà clear è usata spesso in relazione all'elemento br in questo modo:

<br style="clear: both" />

che interrompe il testo effettuando il clear in maniera semplice e pulita.