Posizionare i Div – Prima lezione



Quando dalla realizzazione di un sito in tabelle sono passato ai Div, ho riscontrato più problemi di quel che credessi.

Sono dell’idea che i Div siano di gran lunga il metodo migliore per creare un sito, è solo il procedimento che, essendo diverso, all’inizio vi può creare qualche problema.

Con l’avvento dei fogli di stile ( css ) si può modificare la struttura del sito senza intervenire direttamente sul codice html.

Questi sono i metodi di posizionamento Div più utilizzati :
position:static
position:relative
position:relative + z-index
position:absolute
position:relative + position: absolute

Vediamoli punto per punto ( i valori delle propietà possono essere differenti dalla realtà, l’immagine è da prendere solo come esempio) :

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.

20091019static

Codice HTML :

<div id=”blocco-1″> … </div>
<div id=”blocco-2″> … </div>
<div id=”blocco-3″> … </div>

Codice Css :

div#blocco-1{
position:static;
border:solid;
padding:0.4em;
background-color:#eee;
color: #549a1f;
width:350px;
}
div#blocco-2{
position:static;
border:solid;
padding:0.4em;
background-color:#eee;
color: #549a1f;
width:350px;
}
div#blocco-3{
position:static;
border:solid;
padding:0.4em;
background-color:#eee;
color: #549a1f;
width:350px;
}

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à:

20091019relative

–  top
– right
– bottom
– left

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

Codice HTML :

<div id=”blocco-1″> … </div>
<div id=”blocco-2″> … </div>
<div id=”blocco-3″> … </div>

Codice Css :

div#blocco-1{
position:static;
margin:10px;
border:solid;
padding:0.4em;
background-color:#eee;
color: #549a1f;
width:400px;
}
div#blocco-2{
position:relative;
border:solid;
padding:0.4em;
left:1.8em;
top:0.5em;
width:300px;
background-color:#fafafa;
color: #549a1f;
}
div#blocco-3{
position:static;
margin:10px;
border:solid;
padding:0.4em;
background-color:#eee;
color: #549a1f;
width:400px;
}
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.

20091019relative_z

Codice HTML :

<div id=”blocco-1″> … </div>
<div id=”blocco-2″> … </div>
<div id=”blocco-3″> … </div>

Codice Css :

#blocco-1{
position:static;
border:solid;
padding:0.4em;
width:250px;
color: #549a1f;
}
#blocco-2{
position:relative;
z-index:20;
border:solid;
padding:0.4em;
left:8em;
top:1.3em;
width:200px;
color: #549a1f;
}
#blocco-3{
position:relative;
z-index:10;
border:solid;
padding:0.4em;
left:0.8em;
top:-1em;
width:300px;
color: #549a1f;
}

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.

20091019absolute

<div id=”contenitore”>
<div id=”blocco-1″> … </div>
<div id=”blocco-2″> … </div>
<div id=”blocco-3″> … </div>
</div>

#contenitore-blocco{
position:relative;
}
#blocco-1{
position:absolute;
left:212px;
top:27px;
border:2px solid #549a1f;
padding:0.2em;
width:110px;
background-color:#fafafa;
color: #549a1f;
}
#blocco-2{
position:absolute;
left:405px;
top:27px;
border:2px solid #549a1f;
padding:0.4em;
width:110px;
background-color:#fafafa;
color: #549a1f;
}
#blocco-3{
position:absolute;
left:50px;
top:27px;
border:2px solid #549a1f;
padding:0.4em;
width:110px;
background-color:#fafafa;
color: #549a1f;
}

POSITION:RELATIVE + POSITION:ABSOLUTE

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

20091019rela_abso

Codice HTML:

<div id=”blocco-1″> … </div>
<div id=”contenitore”>
<div id=”blocco-2″> … </div>
</div>
<div id=”blocco-3″> … </div>

Codice Css :

div#contenitore{
position:relative;
left:180px;
top:-77px;
background-color:#fafafa;
border:2px solid #549a1f;
padding:0.4em;
width:400px;
height:100px;
color: #549a1f;
}
#blocco-1{
position:static;
margin-left:10px;
margin-top:10px;
border:2px solid #549a1f;
padding:0.4em;
width:147px;
color: #549a1f;
}
#blocco-2{
position:absolute;
right:5px;
top:5px;
border:2px solid #549a1f;
padding:0.4em;
width:120px;
background-color:#fafafa;
color: #549a1f;
}

Spero vi sia di aiuto

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
Pinterest