CSS: la proprietà position

I CSS permettono di "giocare" con gli elementi di una pagina in modo da posizionarli dove si preferisce, a prescindere cioè dalla naturale posizione sequenziale che un elemento avrebbe se si seguisse il normale flusso del codice HTML.

La proprietà position

Si tratta di una proprietà fondamentale nella costruzione di layout coi CSS. Attraverso position, infatti, è possibile posizionare con precisione un elemento nella pagina. Per ovvie ragioni questa proprietà non è ereditata ma si applica solo agli elementi selezionati direttamente.

Questa proprietà accetta quattro valori:

• static – (default) l’elemento viene posizionato seguendo il normale flusso del codice HTML;
• relative – l’elemento viene posizionato in modo relativo cioè in relazione al suo contenitore naturale; attraverso l’uso delle proprietà top, bottom, left e right è possibile traslare il documento relativamente al suo contenitore naturale; il valore "relative" non estrae il documento dal normale flusso della pagina.
• absolute – l’elemento viene estratto dal normale flusso della pagina e la sua posizione è determinata esclusivamente in base al valore delle proprietà top, bottom, left e right; tale posizionamento viene sempre riferito al primo contenitore con valore diverso da static; se nessuno degli anchestor dell’elemento ha un valore differente da static, il posizionamento sarà relativo alla pagina nel suo complesso.
• fixed – come per absolute, anche in questo caso l’elemento è estratto dal normale flusso della pagina; ci sono però due differenzwe fondamentali: a) il posizionamento riguarda sempre la pagina nels uo complesso; b) l’elemento non scrolla insieme alla pagina ma resta fisso nella psozione determinata mediante le proprietà top, bottom, left e right.

Le proprietà top, bottom, left e right

Strettamente correlate a position sono le proprietà top, bottom, left e right. Queste consentono di specificare un valore percentuale oppure numerico accompagnato da un’unità di misura. Normalmente i valori di tali proprietà sono espressi in pixel. Ad esempio:

div.box
{
  position: absolute;
  top: 20px;
  left: 30px;
}

Nel nostro esempio abbiamo posizionato il nostro box a 20 pixel dal margine superiore ed a 30px da quello sinistro del suo contenitore.

Si noti che, come per i margini, anche per queste proprietà è possibile specificare valori negativi, ad esempio:

div.box
{
  position: absolute;
  top: -20px;
  left: -30px;
}

Utilizzando valori negativi, in pratica, l’elemento posizionato in modo assoluto esce dal suo contenitore.

Il posizionamento assoluto

Abbiamo detto che il posizionamento assoluto si riferisce sempre al primo anchestor con valore di position diverso da static. Normalmente per gestire un elemento posizionato in modo assoluto si assegna position: relative al suo contenitore:

div.contenitore
{
  position: relative;
}
div.box
{
  position: absolute;
  top: 20px;
  left: 30px;
}

Vediamo un esempio completo di tre box posizionati in modo assoluto rispetto ad un contenitore avente posizionamento relativo:

/* definisco il contenitore */
div.contenitore
{
  position: relative;
  width: 400px;
  height: 200px;
}
/* definisco alcune caratteristiche comuni a tutti e tre i DIV presenti nel contenitore */
.contenitore > div
{
  position: absolute;
  width: 100px;
  height: 100px;      
}
/* posiziono il box N.1 */
div.box1
{
  top: 0px;
  left: 0px;
}
/* posiziono il box N.2 */
div.box2
{
  bottom: 5px;
  left: 10px;
}
/* posiziono il box N.3 */
div.box3
{
  top: 30%;
  left: -25px;
}

Il risultato sarà qualcosa del genere:

Si noti che al nostro contenitore abbiamo assegnato dimensioni esplicite: il suo contenuto, infatti, è fatto esclusivamente di tre DIV posizionati in modo assoluto pertanto, in un certo senso, è come se il contenitore fosse vuoto (gli elementi assoluti escono dal flusso della pagina). Se non avessimo applicato le dimensioni il risultato sarebbe stato molto diverso (vi invito a fare una prova).