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.

Loading Facebook Comments ...

3 pensieri su “CSS: posizionamento elementi

  1. Pingback: Popover e elementi fissi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *