Position - Posizionamento oggetti in HTML

=> In questo articolo si farà riferimento a dei CSS esterni all'HTML.

!!! articolo ancora da completare !!!

Oltre al float esiste un altro sistema per posizionare gli oggetti utilizzando i fogli di stile: POSITION.

°°°POSITION°°° Utilizzando la qualità position possiamo posizionare gli oggetti in qualunque punto della pagina.

Ci sono 5 possibili attributi per questa proprietà:

• relative: l'oggetto sta nella posizione in cui dovrebbe stare "naturalmente" ma se aggiungiamo top, bottom, left oppure right l'oggetto si sposterà da quella posizione della misura indicata.
• absolute: dando dei valori a top e/o bottom e/o left e/o right l'oggetto si posizionerà a tot distanza dal suo contenitore esterno, indipendentemente dalla sua posizione "naturale".
• fixed: Se vengono dati dei valori a top e/o bottom e/o left e/o right l'oggetto viene posizionato in base alla finestra che visualizziamo, non in base al contenuto.
• inherit: l'oggetto eredita la qualità position dal suo contenitore.
• static: l'oggetto viene posizionato esattamente nella sua posizione "normale". Può servire per dare un position "neutro" quando serve, per esempio se qualche oggetto da lui contenuto ha visogno di un position particolare.

Qui sotto viene proposto qualche esempio di sintassi.

La classe .alto_dx verrà posizionata in alto a destra utilizzando un position di tipo assoluto.

La classe .venti_px_più_in_basso verrà posizionata 20 pixel più in basso rispetto alla sua posizione "naturale" utilizzando un position di tipo relative.

Ecco alcuni esempi pratici riguardanti il position:absolute; (si apre in altra finestra)

Qui invece trovate quelli relativi al position:relative; (link non ancora attivo)

E qui quelli riguardanti il position:fixed; (link non ancora attivo)

I tre attributi visti qui sopra sono i più utilizzati.

Va ricordato che se si vuole che un oggetto abbia una determinata posizione il contenitore che lo contiene dovrà avere la position assegnata, non importa quale, se così non fosse potrebbero verificarsi dei problemi di visualizzazione.

Se non volete che il contenitore si sposti dalla posizione in cui è basta che assegnate position:relative; senza assegnare altri valori a top, bottom, left o right e il contenitore rimarrà nella sua posizione naturale.