Dopo aver presentato il box-model e le relative proprietà che lo interessano, eccoci a parlare di posizionamento.

Quando si parla di posizionamento in css, si intende la possibilità di ottenere delle impaginazioni differenti da quella classica che prevede il normale flusso con un blocco sotto l’altro.

Il tutto si ottiene agendo sulle proprietà position e float.

Vediamo come, presentando le quattro modalità di posizionamento.

Posizionamento Statico

Ogni elemento è posizionato in modo statico, cioè è inserito in modo classico come visto finora nel flusso dei vari blocchi.

Essendo una proprietà impostata static di default, va usata solo per sovrascrivere valori assegnati tramite una regola differente, altrimenti non c’è bisogno.

p {

position : static;

}

Posizionamento relativo

La proprietà position:relative consente di definire un offset (numero che indica la distanza tra due elementi all’interno di un gruppo di elementi dello stesso tipo) per posizionare un blocco all’interno del flusso senza alterare la posizione degli altri blocchi.

L’offset può essere verticale (espresso tramite le proprietà top e bottom) ed orizzontale (right e left). I valori accettati sono px, em e simili e percentuali che si riferiscono alle misure del box che contiene l’oggetto.

Per meglio comprendere l’uso effettivo di questa proprietà vi riporto uno screenshot tratto da Elated.com che illustra al meglio codice e relativa applicazione ad un generico selettore mydiv :

Posizionamento Assoluto

La proprietà position:absolute consente di definire un punto esatto della pagina in cui posizionare un blocco indipendentemente dalla posizione degli altri blocchi all’interno del flusso.

La posiziona è stabilita sempre tramite le 4 proprietà top e bottom ed orizzontale right e left e il riferimento per la collocazione all’interno della pagina è dato dal primo blocco progenitore oppure dall’elemento HTML.

Un oggetto posizionato in modo assoluto, qualora non specificato, assume le dimensioni minime adatte ad ospitare i contenuti.

Eccovi un esempio di posizionamento assoluto (con il prima e il dopo) applicato ad un generico element

Posizionamento Fisso

Si tratta di un posizionamento position:fixed, come potete immaginare, simile al posizionamento assoluto, ma con due importanti differenze :

1. il punto di riferimento per la posizione del blocco è sempre la finestra del browser
2. quando la pagina scorre, i blocchi posizionati in modo fisso restano ancorati alla posizione iniziale

Capite subito quali possano essere le implicazioni anche perché navigando su blog vari ne avrete trovato applicazione molto spesso.

Ieri mi trovavo a leggere questo articolo su Mashable e notavo, appunto, che scorrendo la pagina i tre blocchi a sinistra relativi alla condivisione del post sui vari Social restano fissi e ancorati alla posizione iniziale.