# CSS/Posizionamento

CSS
Copertina Tutti i moduli · Sviluppo
    Copertina
* Regole e sintassiCSS/Regole_e_sintassi
** SelettoriCSS/Selettori
** CascadeCSS/Cascade
** Unità di misura, ereditarietà e box modelCSS/Unità_di_misura,_ereditarietà_e_box_model
* Supporti di visualizzazione
** Media
** Media con pagine
** Fogli di stile parlati
* Proprietà di baseCSS/Proprietà_di_base
** SfondoCSS/Proprietà_di_base/Sfondo
** Testo baseCSS/Proprietà_di_base/Testo_base
** Testo avanzatoCSS/Proprietà_di_base/Testo_avanzato
** ListeCSS/Liste
** Tabelle
** Animazioni, trasformazioni, transizioni
* Disegnare la struttura della paginaCSS/Disegnare_la_struttura_della_pagina
** PosizionamentoCSS/Posizionamento
* Contenuto generatoCSS/Contenuto generato
* Altre proprietàCSS/Altre_proprietà
* CompatibilitàCSS/Compatibilità
* ReferenceCSS/Reference
Modifica il sommario
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:
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:
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:
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)
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 è 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:
che interrompe il testo effettuando il clear in maniera semplice e pulita.