2. Posizionamento relativo

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):

Blocco div1 posizionato nel normale flusso del documento, senza alcuna specifica.
Blocco div2 con posizionamento relativo TOP:20px; LEFT:20px.
Da notare come le coordinate top e left sono riferite all'elemento precedente (quello verde).
Altro blocco con classe CSS div2, identico al precedente.
Da notare come le coordinate relative non dipendono da dove si trova l'elemento precedente, ma da dove si "dovrebbe trovare" (se avesse posizionamento statico).
In questo caso, siccome l'elemento precedente è anch'esso relativo, la posizione di questo div non si ottiene "sommando" le coordinate relative.


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.

<< Indietro    Home    Avanti >>