Esempio 1: il posizionamento relativo

Esempio pratico di utilizzo delle proprietà per il posizionamento relativo.
Di seguito viene mostrato anche il codice HTML e il relativo CSS.

Esempio:

Lorem ipsum mea sale iisque laoreet ei. Decore aperiam blandit quo ei. Fastidii patrioque constituto sea ea, qui ad sumo erant veritus, debet everti est ad. Pri simul fastidii fabellas an. An option incorrupte mea, omnium numquam petentium ei pro. Per ex nostro audire percipitur, eos latine pericula intellegat ad.

Lorem ipsum mea sale iisque laoreet ei. Decore aperiam blandit quo ei. Fastidii patrioque constituto sea ea, qui ad sumo erant veritus, debet everti est ad. Pri simul fastidii fabellas an. An option incorrupte mea, omnium numquam petentium ei pro. Per ex nostro audire percipitur, eos latine pericula intellegat ad.

Lorem ipsum mea sale iisque laoreet ei. Decore aperiam blandit quo ei. Fastidii patrioque constituto sea ea, qui ad sumo erant veritus, debet everti est ad. Pri simul fastidii fabellas an. An option incorrupte mea, omnium numquam petentium ei pro. Per ex nostro audire percipitur, eos latine pericula intellegat ad.

Codice HTML:

<p>Lorem ipsum mea sale 
iisque laoreet ei...</p>
<p class="nome_classe">Lorem 
ipsum mea...</p>
<p>Lorem ipsum mea sale iisque 
laoreet ei...</p>

Codice CSS:

p{
border:solid;
padding:0.4em;
background-color:#fc6;
color:#000;
}

p.nome_classe{
position:relative;
left:0.8em;
top:0.5em;

border:solid;
padding:0.4em;
width:500px;
background-color:#fc6; }

In questo esempio ci sono tre paragrafi, di cui il secondo è posizionato in modo relativo.
Tramite i valori assegnati alle proprietà top e left il secondo paragrafo è spinto 0.5em verso il basso e 0.8em verso destra rispetto alla posizione che assumerenne nel normale flusso.

torna alla pagina precedente | torna alla lista completa delle proprietà

Esempio 2: il posizionamento assoluto

Esempio pratico di utilizzo delle proprietà per il posizionamento assoluto .
Di seguito viene mostrato anche il codice HTML e il relativo CSS.

Esempio:

Questo blocco è posizionato in modo assoluto.

Codice HTML:

<div>
Questo blocco...
</div>

Codice CSS:

div{
position:absolute;
left: 272px;
top: 1302px;
background-color:#fc6; padding:0.4em; width:350px; border:solid; }

In questo esempio il blocco è posizionato in modo assoluto è può quindi essere collocato in un qualsiasi punto della pagina, indipendentemente dalla presenza degli altri elementi all'interno del flusso).

Bisogna considerare che la propriètà position:absolute potrebbe non funzionare correttamente con alcuni browser come Internet Explorer e Opera.

torna alla pagina precedente | torna alla lista completa delle proprietà

Esempio 3: la proprietà z-index

Esempio pratico di utilizzo della proprietà z-index.
Di seguito viene mostrato anche il codice HTML e il relativo CSS.

Esempio:

Lorem ipsum mea sale iisque laoreet ei. Decore aperiam blandit quo ei. Fastidii patrioque constituto sea ea, qui ad sumo erant veritus, debet everti est ad. Pri simul fastidii fabellas an. An option incorrupte mea, omnium numquam petentium ei pro. Per ex nostro audire percipitur, eos latine pericula intellegat ad.

Lorem ipsum mea sale iisque laoreet ei. Decore aperiam blandit quo ei. Fastidii patrioque constituto sea ea, qui ad sumo erant veritus, debet everti est ad. Pri simul fastidii fabellas an. An option incorrupte mea, omnium numquam petentium ei pro. Per ex nostro audire percipitur, eos latine pericula intellegat ad.

Codice HTML:

<p class="nome_classe1">Lorem 
ipsum mea...</p>
<p class="nome_classe2">Lorem 
ipsum mea...</p>

Codice CSS:

p.nome_classe1{
position:relative;
z-index:10;
border:solid;
padding:0.4em;
left:0.8em;
top:0.5em;
width:500px;
background-color:#fc6;
}
p.nome_classe2{
position:relative;
z-index:20;
border:solid;
padding:0.4em;
left:1.5em;
top:-3em;
width:500px;
background-color:#fc6;
}

In questo esempio l'ordine di sovrapposizione dei due blocchi è determinato dal valore numerico attribuito alla proprietà z-index.
Il numero 10 sta ad indicare che il primo blocco deve apparire prima del secondo.

torna alla pagina precedente | torna alla lista completa delle proprietà