Il box model

Il box model dei Cascading Style Sheets prevede che lo spazio occupato da un elemento blocco sia pari alla sua ampiezza e altezza (proprietà width e proprietà height) più la sua spaziatura interna (proprietà padding) più i suoi bordi (proprietà border) più i suoi margini (proprietà margin).

Il posizionamento

Per impostazione predefinita, il posizionamento di un elemento blocco è statico (position: static). Questo significa che se i fogli di stile non prevedono nulla di diverso, gli elementi all’interno di una pagina HTML si susseguono sequenzialmente uno dopo l’altro, ciascuno su una nuova linea, secondo l’esatto ordine in cui compaiono nella struttura del documento.

Ogni elemento posizionato è collocato con riguardo al suo elemento blocco contenitore, che opera da punto di riferimento per il posizionamento dell’elemento in esso contenuto.

Posizionamento relativo

Se la sua posizione è relativa (position: relative), l’elemento viene spostato (si dice: offset) dalla sua naturale collocazione nella sequenza del documento HTML, preservando comunque lo spazio che lo precede. Questo perchè la sua posizione, regolabile attraverso le proprietà top, right, bottom, left, è calcolata rispetto al punto in cui l’elemento compare nella struttura di marcatura. In altre parole, il blocco contenitore di un elemento posizionato relativamente è sempre il blocco desumibile dalla struttura.

In ogni caso, il posizionamento relativo comporta la possibile sovrapposizione dell’elemento con altri elementi, siano essi posizionati o meno: sta al progettista delle regole di stile armonizzare i posizionamenti o stabilire le corrette sovrapposizioni attraverso la proprietà z-index.

Posizionamento assoluto

Se la sua posizione è assoluta (position: asolute), l’elemento viene rimosso completamente dalla sua naturale collocazione all’interno del flow del documento HTML. In questo caso, il blocco contenitore che funziona da punto di riferimento per il posizionamento (regolabile sempre attraverso le proprietà top, right, bottom, left) è il più immediato elemento padre che abbia a sua volta un posizionamento relativo o assoluto. Se non esiste un elemento contenitore così posizionato, il blocco contenitore sarà allora l’elemento radice (root) del documento, vale a dire l’elemento HTML: il blocco contenitore partirà quindi dall’angolo superiore sinistro del documento, a prescindere dai margini assegnati all’elemento BODY.

Il posizionamento assoluto comporta la sovrapposizione dell’elemento con altri elementi, siano essi posizionati o meno: sta al progettista delle regole di stile armonizzare i posizionamenti o stabilire le corrette sovrapposizioni attraverso la proprietà z-index.