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 pratico di utilizzo delle proprietà per il posizionamento assoluto .
Di seguito viene mostrato anche il codice HTML e il relativo CSS.
Esempio:
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).
position:absolute potrebbe non funzionare correttamente con alcuni browser come Internet Explorer e Opera. torna alla pagina precedente | torna alla lista completa delle 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à