Posizionare il Box Model.

Abbiamo visto che un box è praticamente un contenitore di codice html che inserito in un punto qualsiasi della pagina ne segue il suo flusso naturale generando un ritorno a capo come tutti gli elementi di blocco, ne consegue che più box sarebbero disposti verticalmente: uno di seguito all'altro. A causa di questa caratteristica diventa impossibile creare dei layout elaborati usando più box senza fare uso di una proprietà dei fogli di style dal nome position che permette di posizionare il box in modo diverso da quello naturale.

Gli attributi ammessi per la proprietà position sono: static, relative, absolute e fixed.

Vediamoli per scoprire e capire a che cosa servono.

static è il posizionamento predefinito, quello naturale che segue il flusso nella disposizione della pagina. Il suo posizionamento è nel punto preciso in cui viene creato o richiamato.

Notate come i blocchi inseriti nella pagina seguono il flusso naturale del codice disponendosi verticalmente pur non avendo inserito alcun ritorno a capo, questo perchè il tag <div>, così come tutti gli elementi di blocco, ne provoca automaticamente un ritorno a capo.

Non avendo impostato alcun margin i bordi risultano incollati fra loro. L'esempio sotto è lo stesso box con margin impostato a 5 pixel. Ricordate quanto detto precedente riguardo al box model? si fa riferimento al box interno, per cui i 5 pixel che distanziano i vari box sono 3 pixel più i 2 pixel esterni che fanno da bordo.

questo il codice per definirlo nel foglio di style CSS.

#box1 {
width: 400px;
height: 20px;
border: solid 1px;
margin: 5px;
color: black;
background-color: #ffff99;
}

Il codice si riferisce al box1 ma la definizione per gli altri due box è praticamente la stessa, varia soltanto per il nome: #box2 e #box3 ed il relativo colore di sfondo: background-color.

L'attributo margin accetta anche come valore auto che posizionerebbe il blocco al centro del flusso visto che assegnerebbe automaticamente lo stesso margine ad entrambi i lati.

Da notare che per avere un bordo nel foglio di style non basta specificare il solo spessore (1px), si deve specificare anche un possibile attributo che identifica il tipo di bordo usato, in questo caso solid, diversamente il bordo non risulterà visibile.

Per richiamare i vari box all'interno del codice html:

<div id="box1">blocco 1 con margin inserito... </div>
<div id="box2">blocco 2 con margin inserito... </div>
<div id="box3">blocco 3 con margin inserito... </div>

Quando il contenuto del box supera le sue dimensioni, per esempio inserendo un'immagine più larga del box definito, si hanno comportamenti differenti a seconda del tipo di browser, tanto per cambiare, dove ognuno di questi interpreta a modo suo. Alcuni allargano il box per adattarlo alla dimensione del suo contenuto, altri fanno uscire l'immagine dal box.

E' possibile regolare questo comportamento al fine di unificarlo su tutti i browser grazie alla proprietà overflow che accetta i seguenti possibili attributi: visible: predefinito, hidden: nascosto, auto: appaiono le barre di scorrimento soltanto se necessario, scroll: appaiono le barre di scorrimento sempre, anche se non necessitano.

overflow visible: predefinito, interpretato in modo differente dai vari browser.

overflow hidden: nascondi le barre e taglia l'immagine alle dimensioni del blocco.

overflow auto: taglia l'immagine ed inserisci soltanto le barre di scorrimento necessarie.

overflow scroll: taglia l'immagine ed inserisci entrambe le barre di scorrimento anche se non necessarie.

relative è il posizionamento modificato rispetto alla posizione predefinita, praticamente un offset che consente di spostare il box rispetto alla sua naturale origine, senza che questo spostamento incida o alteri il posizionamento degli altri elementi (oggetti) facenti parte della stessa pagina.

Notate come il blocco 2 sia spostato di 12 pixel a partire dall'alto e di 20 pixel a partire dalla sinistra rispetto alla sua posizione naturale, senza che gli altri due box subiscano alcuna variazione di posizione. Questo perché position relative agisce solo sul box che ne fa uso senza alterare il normale flusso.

E' possibile specificare la posizione relative usando gli attributi top, left, bottom e right. Rispettivamente per posizionarlo a partire dall'alto, da sinistra, dal basso e da destra. Sono ammessi anche numeri negativi che posizionerebbero il blocco in direzione contraria a quella dei numeri positivi.

Questo il codice nel css per definirlo.

#box2 {
position: relative;
top: 12px;
left: 20px;
width: 450px;
height: 20px;
border: solid 1px;
margin: 5px;
color: black;
background-color: #ffccff;
}

In questo esempio il blocco 2 risulta sovrapposto al blocco 3 oscurandolo in parte, è possibile stabilire l'ordine di sovrapposizione con la proprietà z-index che accetta solo valori numerici positivi, il numero più alto è quello in primo piano e copre il numero più basso.

Adesso è il blocco 3 che risulta sovrapposto al blocco 2 perchè ha un valore z-index di 1 che è superiore al valore dello z-index 0 (di default è impostato a 0) del blocco 2.

questo il codice nel css per definirlo.

#box3 {
position: relative;
z-index: 1;
width: 450px;
height: 20px;
border: solid 1px;
margin: 5px;
color: black;
background-color: #ccffff;
}

absolute è il posizionamento assoluto, cioè è possibile posizionare il blocco in un qualsiasi punto della pagina, a differenza del posizionamento relativo che abbiamo visto non alterava gli altri oggetti pur condizionandoli con la sua presenza, absolute farà in modo che il blocco così definito risulti come se non facesse parte della pagina, praticamente non inciderà in alcun modo con gli altri oggetti, una specie di sovrapposizione alla pagina stessa.

E' possibile specificare la posizione absolute usando gli stessi attributi visti per relative top, left, bottom e right. Rispettivamente per posizionarlo a partire dall'alto, da sinistra, dal basso e da destra. Questa volta però il punto di riferimento è al primo blocco progenitore non statico e se non esiste, all'elemento <html>. Praticamente i margini della finestra del browser.

Se non viene specificato alcun valore di posizionamento il blocco assumerà valore assoluto riferendosi al punto in cui viene inserito dal normale flusso del codice. Su questa pagina è possibile vedere un esempio che chiarirà tutto quanto in modo più semplice.

fixed non supportato dai browser IE è simile al posizionamento assoluto ma il riferimento è sempre e solo alla finestra del browser, quando la pagina scorre i box così definiti restano fissi nella loro posizione specificata.

Continua: come adattare un box automaticamente, praticamente il box liquido.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.