Il posizionamento static è quello di default. La posizione dell'elemento segue il normale flusso del testo, quindi
specificare POSITION:static serve principalmente a permettere l'override della regola di posizionamento
definita nell'eventuale elemento contenitore.
In alcuni casi si scrive POSITION:static solamente per ricordarsi che gli elementi contenuti sono
riferiti all'intero documento, e non alla posizione dell'elemento contenitore.
Esempio:
div static.
div senza specifiche contenuto dentro il div precedente (quello verde),
quindi viene posizionato semplicemente di seguito.div absolute contenuto dentro il div static (quello verde più sotto).
Per questo motivo viene posizionato con riferimento assoluto rispetto all'intero documento (TOP: 140px; LEFT: 100px).Il posizionamento absolute rimuove l'elemento dal normale flusso del testo HTML,
quindi non viene più rispettato l'ordine degli elementi.
Per questo motivo, il blocco giallo in alto,
corrisponde a del codice HTML scritto dopo il codice del blocco arancione.
div relative (senza coordinate).
div senza specifiche contenuto dentro il div precedente (quello azzurro),
quindi viene posizionato semplicemente di seguito.div absolute contenuto dentro il div relative (quello azzurro), avente
la stessa classe CSS dell'altro elemento giallo (e quindi le stesse coordinate: TOP: 140px; LEFT: 100px).
Tali coordinate sono però relative all'elemento contenitore (quello azzurro).Se l'elemento specificato come absolute è contenuto all'interno di un elemento
relative, le sue coordinate "assolute" sono riferite al contenitore anziché all'intero documento
(vedere il blocco giallo qui sotto).
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.