CSS: posizionamento elementi

Molto spesso i CSS vengono senza approfondire realmente le loro possibilità. O peggio ancora si usano (magari sempre quegli attributi) facendo copia e incolla e adattando il codice site by site.

Uno degli elementi più bistrattati dei CSS è la position property. Questo attributo può assumere 4 diversi valori:

• STATIC: valore di default. L’elemento con position:static, viene visualizzato nella posizione in cui è stato inserito nel codice, quindi in base ai propri container (parent)
• RELATIVE: con questo valore la posizione dell’elemento dipende da quanto dichiarato negli attributi LEFT o RIGHT o TOP o BOTTOM. I valori fanno riferimento alla posizione STATIC dell’elemento. Esempio:
  .myRelative{position:relative;top:10px;left:100px}
  dichiara una classe posizionata più in basso di 10px e più a destra di 10px rispetto alla sua posizione originale
• ABSOLUTE: lo spostamento di chiarato in LEFT (…) fa riferimento alla posizione dell’elemento "contenitore" dell’elemento dichiarato.
• FIXED: lo spostamento di chiarato in LEFT (…) fa riferimento alla finestra del brower. Esempio:
  .myRelative{position:fixed;top:10px;right:100px}
  dichiara una classe posizionata a 100px dall’angolo destro del browser e a 10px dal bordo superiore.

Per maggiori informazioni date una occhiata anche su dozarte e su blog.