CSS/Posizionamento

Wikibooks, manuali e libri di testo liberi.
< CSS

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[modifica]

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[modifica]

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 la medesima proprietà) tramite le proprita 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[modifica]

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[modifica]

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.