CSS: Fogli di stile

Posizionamento degli elementi

Come

• position (posizione degli elementi e modalità di presentazione sulla pagina)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- static (default)
- absolute (l'elemento è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom rispetto al box contenitore dell'elemento, rappresentato dal primo elemento antenato (ancestor) con posizionamento diverso da static, se non esiste il posizionamento avviene rispetto all'angolo superiore sinistro della pagina, l'elemento posizionato in modo assoluto scorre insieme al resto del documento)
- fixed (come absolute ma il box contenitore è sempre il cosiddetto viewport, finestra principale del borwser e il box non scorre con il resto del documento ma rimane fisso al suo posto, l'effetto è simile a quello dei frame dell'HTML)
- relative (l'elemento viene posizionato relativamente al suo box contenitore, la posizione viene impostata con le proprietà top, left, bottom, right)

Dove

Le proprietà che definiscono le coordinate possibili sono quattro, anche se le più usate sono top e left

• top (con absolute o fixed definisce la distanza rispetto al bordo superiore dell'elemento contenitore, con relative stabilisce l'ammontare dello spostamento rispetto al lato superiore della posizione originaria)

Valori
- auto
- valore numerico con unità di misura (numeri positivi o negativi)
- valore in percentuale (relativa all'altezza dell'elemento contenitore)

• left (con absolute o fixed definisce la distanza rispetto al bordo sinistro dell'elemento contenitore, con relative stabilisce l'ammontare dello spostamento rispetto al lato sinistro della posizione originaria)

Valori
- auto
- valore numerico con unità di misura (numeri positivi o negativi)
- valore in percentuale (relativa all'altezza dell'elemento contenitore)

• bottom (con absolute o fixed definisce la distanza rispetto al bordo inferiore dell'elemento contenitore, con relative stabilisce l'ammontare dello spostamento rispetto al lato inferiore della posizione originaria)

Valori
- auto
- valore numerico con unità di misura (numeri positivi o negativi)
- valore in percentuale (relativa all'altezza dell'elemento contenitore)

• right (con absolute o fixed definisce la distanza rispetto al bordo destro dell'elemento contenitore, con relative stabilisce l'ammontare dello spostamento rispetto al lato destro della posizione originaria)

Valori
- auto
- valore numerico con unità di misura (numeri positivi o negativi)
- valore in percentuale (relativa all'altezza dell'elemento contenitore)

• visibility (determina se un elemento debba essere visibile o nascosto)
  proprietà non ereditata
  si applica a tutti gli elementi

Valori
- visible (default, elemento visibile)
- hidden (elemento nascosto, nel layout appare una zona vuota, a differenza dal valore none della proprietà display)

• clip (parte di un elemento posizionato che deve essere visibile, non supportata da nessun browser)

• z-index (ordine di posizionamento degli elementi su livelli)

Valori
- auto (ordine dei livelli uguale per tutti gli elementi)
- valore numerico (a valore superiore corrisponde livello superiore)

Altre proprietà

• display (definisce il trattamento e la presentazione di un elemento cambiando l'ordine delle cose originario)
  proprietà ereditata

Valori (i più importanti)
- inline (default, l'elemento assume le caratteristiche degli elementi inline)
- block (l'elemento viene trattato come un elemento blocco)
- list-item (l'elemento si trasforma in un elemento lista)
- run-in (l'elemento viene incorporato e inserito all'inizio del blocco seguente, valore poco supportato dai vari browser)
- compact (l'elemento viene piazzato al fianco di un altro, non supportato da nessun browser)
- marker (il contenuto generato con gli pseudo-elementi :before e :after viene trattato come un marcatore di liste, non supportato da nessun browser)
- none (non genera alcun box)
- table | inline-table | table-cell | table-row | table-row-group | table-column | table-column-group | table-header-group | table-footer-group | table-caption (per impostare il display degli elementi come elementi di una tabella, supporto adeguato solo in Mozilla)
Esempi di utilizzo.
Impaginare su di un'unica riga un'immagine inserita nel testo come elemento inline: Visualizzare una versione di solo testo di una pagina: Utile anche per definire le presentazione di elementi di un documento XML

• float (per cambiare il normale flusso di scorrimento degli elementi, per elementi diversi dalle immagini è importante che l'elemento sia definito in orizzontale con la proprietà width)
  proprietà non ereditata

Valori
- none
- left (l'elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra)
- right (l'elemento viene spostato sul lato destro, il contenuto scorre a sinistra)

• clear (impedisce che al fianco di un elemento compaiano altri elementi con il float, per evitare il sovrapporsi di elementi che si possono venire a trovarsi in posizioni indesiderate)
  proprietà non ereditata
  si applica solo agli elementi blocco

Valori
- none
- left (impedisce il posizionamento a sinistra)
- right (impedisce il posizionamento a destra)
- both (impedisce il posizionamento su entrambi i lati)