La parte dei CCS relativa al posizionamento degli elementi è un argomento complesso che studiato a fondo ci permetterà di creare architetture di pagine anche senza il minimo utilizzo di tabelle.

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).