Grazie a questi principi dei CSS potremo creare i nostri layout di pagina staccandoci definitivamente da quelle che sono le limitazioni che una tabella può dare.

Ho intenzione di affrontare la questione in due lezioni. Nella prima esamineremo la proprietà position e le diverse modalità di posizionamento. Nella seconda vedremo con quali proprietà è possibile posizionare con precisione gli elementi e gestirne alcuni decisivi aspetti visuali.

La proprietà position

position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata. Sintassi:

<selettore> {position: <valore>;}

i valori che questo parametro può assumere sono 4: fixed, absolute, static, relative. Gli unici due al momento supportati dai vari browser sono solo due: absolute e relative. Parlerò, infatti, solo du questi due parametri.

• absolute – L’elemento, o meglio, il box dell’elemento viene rimosso dal flusso del documento ed è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom. Il posizionamento avviene sempre rispetto al box contenitore dell’elemento. Un elemento posizionato in modo assoluto scrorre insieme al resto del documento.
• relative - L’elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l’elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, bottom, right. Ma qui esse non indicano un punto preciso, ma l’ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.

La creazione di un livello tipo potrebbe essere questa:

#immagine{ position:absolute;
           top:50px; left:20px; z-index:1; }

In questo esempio, scopriamo una nuova proprietà: z-index. La proprietà z-index indica al browser la posizione sul piano azimutale, rispetto al resto della pagina. Cosa vuol dire: prendiamo due fogli di carta, su uno gli scriviamo testo, sull’altro immagine. Mettiamoli uno sull’altro: abbiamo definito lo z-index ovvero il “livello” superiore o inferiore dell’immagine rispetto al testo. L’unico valore permesso per questa proprietà è un valore numerico piu alto sarà il valore piu sara in rilievo rispetto al resto della pagina. Se mettiamo un valore negativo per esempio -1 il box contenitore andrà a finie sotto lo sfondo! Difficilmente visibile!

E a proposito di visibilità ci sarebbe anche un’altra proprietà, appunto visibility. Dal nome stesso si capisce a cosa può servire, ovvero a rendere visibile o meno un oggetto( testo, immagini o altro) fino a che non si verifichi una determinata condizione. I valori possibili per quest’ultima proprietà sono due: hidden (nascosto) e visible (visibile).

Ci sono tre tipi di oggetti: blocco, in linea e rimpiazzati. In inglese rispettivamente block level, inline  level e replaced.

Oggetti di tipo blocco (block level)

Questi tipi di oggetto, sono gli elementi della pagina che anche visibilmente hanno le sembianze di un blocco, scatole, una sorta di rettangolo largho quanto il proprio contenitore.  Gli elementi blocco di una pagina web sono i tag <p>,<div>, <h1>, <h2>….<h6>,<blockquote>.

Attenzione: “Questo tipo di oggetti come impostazione predefinita sono seguiti da un a capo”.

Gli oggetti successivi agli elementi blocco andranno irrimediabilemnte sotto l’elemento blocco precendente anche se si tratta di altri elementi blocco. Per stravolgere questo tipo di impostazione esiste l’attributo float, ma ne parleremo in seguito.

Oggetti di tipo in linea (inline level)

Gli oggetti di tipo in linea non formano nuovi blocchi di contenuti, ma sono distribuiti, come suggerisce il nome, in più linee. Sono elementi in linea il testo senza tag, <a>, <span>, <strong>, <em>, <abbr>. Questo tipo di oggetti non viene seguito da un a capo predefinito.

Oggetti rimpiazzati (replaced)

Gli oggetti di questo tipo sono tutti quegli oggetti dei quali il browser(per esempio, Mozilla Firefox) dell’utente conosce a priori le dimensioni dell’oggetto. Un esempio di elemento rimpiazzato è una immagine. Infatti inserendo una immagine non è necessario specificare le dimensioni poiché il browser visualizzerà l’immagine nelle sue dimensioni originali.

Nell’html gli oggetti di questo tipo sono appunto <img>, <input>, <textarea>, <select>.

Nella prossima lezione vedremo come posizionare gli oggetti all’interno di una pagina