Posizione relativa

Qui mostriamo cosa significa impostare il valore di position su relative. Usiamo ancora come base di esempio un div (div3). Nel normale flusso del documento esso dovrebbe essere posizionato immediatamente sotto le righe con il codice, come nell'esempio sul posizionamento assoluto. Invece risulta spostato in senso orizzontale di 30px, in senso verticale di 50px. E' evidenta che qui le proprietà top e left hanno un significato ben diverso. Settando il valore di position su absolute il box lo avremmo trovato in alto, proprio all'inizio della pagina, in quanto il posizionamento sarebbe avvenuto relativamente alla finestra del browser.

Codice:

#div3 {
background: Silver;
width: 300px;
position: relative;
top: 50px;
left: 30px;
}

Questo è il box identificato come div1. Occupa il suo posto normale nel documento.

 

 

 

Per capire meglio, un altro esempio. Questa volta applichiamo il posizionamento relativo ad un elemento inline, ovvero una porzione di paragrafo marcata con il tag <span>. Il risultato parla da sé. Come si vede è possibile usare anche valori negativi.

Codice:

#span {
position: relative;
top: -10px;
left: 10px;
background: silver;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.