Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile > 10 modi per posizionare i div


10 modi per posizionare i div

Sfruttando le potenzialità dei CSS2 è possibile controllare il posizionamento degli elementi nel normale flusso di una pagina web. Di seguito verranno riportati 10 diversi modi attraverso i quali è possibile posizionare i div.

A cura di: Fabio Regina in collaborazione con Andrea Di Pizio | 22 giugno 2006



Gli elementi html si dispongono all'interno di una pagina web a seconda delle loro caratteristiche.
Gli "elementi a livello di blocco" (<h1..h6>, <p>, <div>, etc.) si dispongono uno di seguito all'altro in verticale, distanziandosi in base ai margini.
Invece, gli "elementi in linea" (<strong>, <span>, <a>, etc.) si dispongono orizzontalmente uno di seguito all'altro, su una o più linee a seconda dello spazio a disposizione.
Con il normale flusso degli elementi non è però possibile realizzare layout elaborati, poichè la sola disposizione possibile per i blocchi è la successione verticale degli stessi.

Sfruttando le potenzialità dei CSS2 è possibile controllare il posizionamento degli elementi nel normale flusso.
Di seguito mostreremo 10 modi diversi per disporre l'elemento di blocco più utile per la gestione dei layout: il tag <div>. Per ogni esempio verrà mostrato il codice html e il relativo foglio di stile associato.


1. position:static

La proprietà position:static è la proprietà di default e prevede il normale comportamento degli elementi all'interno del flusso. Pertanto gli elementi a livello di blocco si dispongono uno di seguito all'altro in verticale, distanziandosi in base ai margini.

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per il nostro esempio.

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>
<div id="box-3"> ... </div>

Esempio position:static

torna su


2. position:relative

Con la proprietà position:relative è possibile definire uno spostamento del div rispetto alla posizione che normalmente assumerebbe di default.
Lo spostamento è assegnato tramite le proprietà:

  • top
  • right
  • bottom
  • left

I valori ammessi, percentuali e lunghezze (em, px, etc.), possono essere sia positivi che negativi.
Ad esempio:

div{
top:-25px;
left:100px;
}
In genere, il valore assegnato a top indica la distanza che separa il bordo superiore del div con gli altri elementi.
Il valore assegnato a bottom indica invece la distanza che separa il bordo inferiore del div con gli altri elementi.
Il valore assegnato a left indica la distanza che separa il bordo sinistro del div con gli altri elementi.
Infine, il valore right indica la distanza che separa il bordo destro del div con gli altri elementi.

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro primo esempio.

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>
<div id="box-3"> ... </div>

a) Esempio position:relative

Per la realizzazione del secondo esempio, invece, è stato necessario modificare leggermente l'html dell'esempio precedente. Questo è il codice:

<div id="box-1"> ... </div>
<div id="box-2">
 <div id="box-2a"> ... </div>
</div>
<div id="box-3"> ... </div>

b) SecondoEsempio position:relative

torna su


3. position:relative + z-index

Quando due o più blocchi (div) posizionati in modo relativo si sovrappongono, l'ordine di sovrapposizione è determinato dalla proprietà z-index, la quale ammette solo valori costituiti da numeri interi non negativi. I div con z-index maggiore coprono i div con z-index minore.

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>
<div id="box-3"> ... </div>

Esempio position:relative + z-index

torna su


4. position:absolute

Un blocco posizionato in modo assoluto può essere collocato in un qualsiasi punto della pagina, indipendentemente dalla presenza degli altri elementi all'interno del flusso. Un blocco posizionato in modo assoluto può essere collocato anche in relazione ad un altro elemento che lo contiene.

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="contenitore">
 <div id="box-1"> ... </div>
 <div id="box-2"> ... </div>
 <div id="box-3"> ... </div>
</div>

Esempio position:absolute

torna su


5. position:relative + position:absolute

Un blocco posizionato in modo assoluto può essere collocato in relazione al blocco che lo contiene.

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="box-1"> ... </div>
 <div id="contenitore">
  <div id="box-2"> ... </div>
 </div>
<div id="box-3"> ... </div>

Esempio position:relative + position:absolute

torna su


6. position:relative + 2 position:absolute

Due blocchi posizionati in modo assoluto possono essere collocati in relazione al blocco che li contiene.

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="contenitore">
 <div id="box-1"> ... </div>
 <div id="box-2"> ... </div>
</div>

Esempio position:relative + 2 position:absolute

torna su


7. position:fixed

Il posizionamento fisso ha una funzione molto simile al posizionamento assoluto con la differenza che il riferimento per il posizionamento è sempre la finestra del browser.
Il problema della proprietà position:fixed è che non è supportata da Internet Explorer 6 e precedenti per Windows. Nell'esempio che segue il posizionamento funzionerà correttamente anche su Internet Explorer 6 e precedenti poichè è stata utilizzata la tecnica di Edwards [link esterno] che consente di risolvere il baco del browser della Microsoft.

Struttura generale HTML

In questo esempio, per fare comprendere meglio il funzionamento del posizionamento fisso, abbiamo deciso di presentarvi la pagina d'esempio priva di descrizioni. La relativa descrizione e il CSS utilizzato verrano riportati qui di seguito.
Innanzitutto, questo è il codice html essenziale che abbiamo utilizzato:

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>

e questo invece è il foglio di stile associato:

#box-1{
position:fixed;
left:350px;
width:300px;
background-color:#FFE479;
border:1px solid #000;
font-size:1em;
}
#box-2{
width:300px;
height:800px;
background-color:#FFE479;
border:1px solid #000;
margin:15px;
font-size:1em;
}

Questo è invece l'esempio concreto: esempio position:fixed

È possibile notare come il box-2, che sta sulla destra del box-1, allo scorrere della pagina rimanga fisso, ovvero ancorato alla parte superiore della pagina. Infatti, la proprietà left lo posiziona alla sinistra della finestra del browser di 350 pixel e la proprietà position:fixed fa sì che il box rimanga ancorato e fisso a quella posizione.

torna su


8. float

Con questa proprietà è possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float. Pertanto i valori ammessi dalla proprietà float sono:

  • none (valore predefinito) indica che l'elemento non deve essere spostato;
  • left (indica che l'elemento deve essere spostato a sinistra);
  • right (indica che l'elemento deve essere spostato a destra).

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>

Esempio float

torna su


9. float + clear

La proprietà clear serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si applica solo agli elementi blocco.
Visto che il float sposta un elemento dal flusso normale del documento, è possibile che esso venga a trovarsi in posizioni non desiderate, magari al fianco di altri elementi che vogliamo invece tenere separati. La proprietà clear risolve questo problema.
La proprietà clear ammette i seguenti valori:

  • none (valore predefinito)
  • left (annulla l'effetto della dichiarazione float:left;)
  • right (annulla l'effetto della dichiarazione float:right;)
  • both (annulla l'effetto di ambedue le dichiarazioni)

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>
<div id="box-3"> ... </div>

Esempio float + clear

torna su


10. Esempio completo

In questa sezione mostreremo come è possibile sfruttare le proprietà per il posizionamento degli elementi html per generare layout complessi.

Esempio completo

torna su


Articoli correlati

torna su |

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]