Gli elementi possono essere posizionati in modo relativo rispetto all'elemento precedente usando l'attributo
POSITION: relative.
Il risultato cambia a seconda che l'elemento sia un tag di blocco (esempio: p
) oppure un tag di linea (esempio: span
).
Esempio (elementi di blocco):
TOP:20px; LEFT:20px
.Esempio (elementi in linea):
Prima dello span...Span con coordinate relative TOP:-30px; LEFT:20px
,
posizionato all'interno di un paragrafo (testo in nero)...dopo lo span.
Lo span (testo azzurro) è posizionato nel normale flusso del documento, ma assume posizione relativa al contenitore.
Come nel caso del posizionamento assoluto, il posizionamento relativo rimuove l'elemento dal normale flusso
del testo HTML.
Ciò significa che non è più rispettato l'ordine degli elementi,
quindi le varie sezioni potrebbero sovrapporsi:
Esempio:Span come sopra.Questo testo è posizionato nel normale flusso del documento.
Esempio:Span come sopra.Questo testo è posizionato nel normale flusso del documento.
Nota:
Le pagine del presente tutorial CSS sono prive di margini ed altri accorgimenti allo scopo di facilitarne la comprensione.
In questo modo risulta più facile leggere il codice HMTL mediante l'opzione "Visualizza sorgente pagina" del browser.