Posizionamento relativo di un elemento "div" con i CSS

Il posizionamento di un box, in maniera relativa, esegue due cose:

Per "preservare" lo spazio lasciato, si intende che gli altri elementi inseriti nel flusso reagiscono come se il box si trovasse ancora nella posizione da cui è stato spostato.
Si veda il seguente codice:

.boxrel {
position: relative;
top: 20px;
right: 20px;
padding: 10px;
margin: 5px;
background-color: #f60;
border: 1px solid #000;
width: 30%;
color:#033;
font-weight:bold;
}

Il valore di spostamento viene inserito dove è stato dichiarato dalla proprietà. Quindi top: 20px; significa 20 pixel che vengono "inseriti"sopra il box per spingerlo verso il basso;
right: 20px significa che il box viene spinto 20 pixel verso sinistra. Di conseguenza bottom lo spinge verso l'alto e left lo spinge verso destra. Apparentemente sembra una inversione, ma la proprietà descrive il punto in cui il valore viene inserito e non la direzione dello spostamento. Ecco il file di esempio per quanto riguarda quanto descritto fin' ora. Si osservi il codice seguente:

.boxrel {
position: relative;
bottom: 20px;
left: 20px;
padding: 10px;
margin: 5px;
background-color: #f60;
border: 1px solid #000;
width: 30%;
color:#033;
font-weight:bold;
}

Questo esempio mostra quanto scritto nel codice sopra riportato.