Come posizionare gli elementi in una pagina html con i css

La proprietà position per gli elementi html è stata introdotta nella versione 2 dei CSS dal w3c, il loro utilizzo è molto semplice e spesso vengono utilizzati impropriamente da utenti poco esperti per la realizzazione del layout.

Come vedremo in questo tutorial il posizionamento dei vari elementi richiede qualche competenza per non compromette la compatibilità del layout nei vari browser.

La proprietà position

La proprietà position ammette quattro valori: static, relative, absolute e fixed. Esistono grandi differenze tra questi quattro valori che occorre capire per utilizzarli al meglio.

Posizionamento statico

Il valore static è attribuito di default ad ogni elemento ed ignora qualunque tipo di offset attribuito all’elemento come top, left, bottom e right. Questo tipo di posizionamento non altera la posizione dell’elemento e viene implicitamente attribuito ad ogni elemento della pagina com’è possibile vedere in questo esempio.

Posizionamento relativo

Il valore relative altera il posizionamento di un elemento tramite un offset impostato con le proprietà top, left, bottom e right. Gli altri elementi della pagina non mutano il proprio posizionamento in quanto il posizionamento relativo non estrae dal flusso l’elemento ma lo colloca su un livello superiore.

In questo esempio possiamo notare come il posizionamento relativo collochi l’elemento sopra un elemento con posizionamento statico. Per gestire la sovrapposizione degli elementi è possibile utilizzare z-index con un valore inferiore a 0 (avendo gli elementi della pagina z-index con valore 0 di default) come in questo esempio.

Posizionamento assoluto

Il valore absolute posiziona un elemento in relazione all’elemento html o all’elemento genitore che ha un posizionamento diverso da statico. Bisogna ricordare che a differenza del posizionamento relativo quello assoluto colloca l’elemento al di fuori del tradizionale flusso della pagina influenzando quindi il layout.

In questo esempio vediamo come due elementi con posizionamento assoluto si comportino in maniera diversa a causa del riferimento per la posizione.

Il primo div infatti calcola l’offset partendo dall’elemento genitore (con id relativo) mentre il secondo non avendo un elemento genitore con posizionamento diverso da statico prende come riferimento l’elemento html.

Occorre ricordare che Internet Explorer 6 e versioni precedenti presentano numerosi bug sul posizionamento assoluto. Una buona soluzione per risolvere queste problematiche è quello di settare un’altezza dell’elemento contenitore a 0 solo per Internet Explorer 6 e precedenti.

<!--[if lte IE 6]>
div{height:0;}
<![endif]-->

Posizionamento fisso

Il valore fixed estrae un elemento dal flusso e lo posiziona in base all’offset (specificato con top, left, bottom e right) in relazione all’elemento html.

Il posizionamento fisso può sembrare simile al posizionamento assoluto, ma non rispetta la regola del genitore con posizionamento diverso da statico, infatti utilizza sempre come riferimento l’elemento html, utilizzando il precedente esempio con questo tipo di posizionamento notiamo che i due div si sovrappongo in cima alla pagina.

Un’altra differenza rispetto al posizionamento assoluto è che ignora lo scroll nelle pagine con contenuto più alto dell’area visibile nel browser e mantiene la posizione definita in relazione alla finestra del browser.

In questo esempio vediamo come si comporta un elemento con posizionamento assoluto ed uno con posizionamento fisso in una pagina con molto contenuto.

Occorre inoltre ricordare che il valore fixed per la proprietà position non è supprtato da Internet Explorer 6 e versioni precedenti.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli e contrassegnata con , , . Contrassegna il permalink.

4 risposte a Come posizionare gli elementi in una pagina html con i css

  1. Famba scrive:

    Quindi se uso posizionamento relativo con 50px dalla cima il div si mette a 50 pixel di distanza dall’alto dall’elemento genitore?

  2. Mauro Accornero scrive:

    Se ad un elemento applichiamo una proprietà position:relative e una proprietà top:50px si noterà che la sua posizione varierà di 50px rispetto alla sua posizione originale. Il legame gerarchico a cui ti riferisci non è tipico del posizionamento relativo bensì del posizionamento assoluto. Se un elemento posizionato in maniera assoluta è contenuto in un elemento con posizionamento diverso da static verrà preso come riferimento. Per fare un esempio pratico prova a definire come regola su un elemento position:absolute; top:0; left:0; vedrai che si posiziona nell’angolo superiore sinistro della pagina. Se lo stesso elemento lo inserisci in un div con position:relative; vedrai che si posizionerà nell’angolo superiore sinistro dell’elemento genitore.

  3. Sergio scrive:

    Ciao io sono alle prima armi con css, ed ho un pò di difficolta con il posizionamento dei div.
    Non riesco a capire quale sia il migliore da usare per la composizione di una pagine web e in quale occasione si usa il posizionamento relativo, e in quale è meglio usare l’ assoluto.
    Potresti aiutarmi. Grazie

    • Mauro Accornero scrive:

      Sicuramente per realizzare un layout base ti consiglierei di utilizzare il float. Se necessiti di posizionare in maniera peculiare alcuni elementi in generale il position relative è più semplice da gestire, non estraendo il singolo elemento dal flusso crea meno problematiche. Il posizionamento assoluto invece necessità sempre di un riferimento sulla pagina, come spiegato nell’articolo, inoltre sono presenti molti bachi su internet explorer sul posizionamento assoluto.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>