I documenti HTML sono posizionati all'interno della pagina attraverso uno schema di flusso dei dati. Questo significa che si parte dal margine alto a sinistra del documento e ogni elemento si posiziona in base al precedente, senza possibilita' di sovrapporre oggetti. Le specifiche dei CSS-P consentono, invece, tre diversi tipi di posizionamento:

relativo: tale posizionamento non esce dal flusso di dati, ne' produce alcuna modifica rispetto agli elementi posizionati in modo statico. Assume caratteristiche proprie del posizionamento dinamico quando vengono impostate le proprieta' left e right, che spostano l'elemento a sinistra e in alto di quello che lo precede.

Ecco un esempio di posizionamento assoluto con uso delle proprieta' top e left:

<DIV STYLE="position:absolute; top:100px; left:100px">
<IMG SRC="elemento01.gif" border=0>
</DIV>

Le misure sono espresse in pixel (px), ma possono essere sostituite con altri valori: punti (pt), centimentri (cm), pollici (in) ecc. Tutte fanno riferimento al margine superiore sinistro.
L'esempio considerato crea un foglio di stile con posizionamento assoluto (position:absolute) distanziato dal margine superiore e sinistro di 100 pixel.

Per comprendere la differenza pratica tra posizionamento assoluto (visto in precedenza) e relativo, procediamo con un altro esempio. Si tratta di un semplice testo privo di qualsiasi formattazione, che il documento interpreta come flusso di elementi. All'interno di questo testo impostiamo un foglio di stile con posizionamento relativo per le parole "sito italiano", con una distanza dall'elemento piu' vicino alla sinistra e in alto di 10 pixel:

Questo e' il <SPAN STYLE="position:relative; top:10px; left:10px"><B>sito italiano></B></SPAN> piu' visitato e autorevole sul Web publishing.
L'effetto è il seguente:

Questo e' il sito italiano piu' visitato e autorevole sul Web publishing.

Altri parametri impostabili sono width e height che stabiliscono rispettivamente la larghezza per orizzontale e l'altezza per verticale del foglio di stile. Anche in questo caso possono usarsi indifferentemente le misure consentite dai fogli di stile:

<DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px">
il sito italiano piu' visitato e autorevole sul Web publishing.
</DIV>

Il testo viene racchiuso in un foglio di stile di dimensioni pari a 150px di altezza e altrettanti di larghezza. La distanza dal margine superiore sinistro e' quella espressa in precedenza.
L'effetto è il seguente:

sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, consigli utili per la programmazione.

---

La proprieta' visibility determina la visibilita' di un elemento. Puo' essere impostato su hidden o visible

<DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px; visibility:hidden">
<IMG SRC="elemento01.gif" border=0>
</DIV>

hidden rende invisibili gli elementi, mentre visibile li rende visibili:

<DIV STYLE="position:absolute; top:100px; left:150px; width:200px; height:150px; visibility:visible">
<IMG SRC="elemento02.gif" border=0>
</DIV>

---

Si e' detto in apertura che i CSS-P permettono di sovrapporre immagini, testo ed elementi gli uni agli altri. La gerarchia con la quale tali elementi vengono sovrapposti dipende, quando non stabilito diversamente, dalla posizione nel codice HTML. Un elemento posizionato dopo un altro sara' sovrapposto a questo. Come nell'esempio che segue:

<DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible">
<IMG SRC="elemento01.gif" border=0>
</DIV>

<DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible">
<IMG SRC="elemento02.gif" border=0>
</DIV>

Con quanto appena detto, è' possibile modificare l'impostazione di default per cui un elemento scritto successivamente nel codice e' sovrapposto agli elementi precedenti, attraverso la proprieta' z-index. Questa proprieta' definisce l'ordine grafico degli elementi attraverso valori numerici. L'elemento principale va impostato come valore positivo "1", mentre gli altri in posizione sottostante con valore negativo "-1". Riprendendo l'esempio precedente e lasciando inalterato l'ordine gerarchico, e' possibile che il secondo elemento si sovrapponga al primo grazie alla proprieta' z-index:

<DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible z-index:1">
<IMG SRC="elemento01.gif" border=0>
</DIV>

<DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible z-index:2">
<IMG SRC="elemento02.gif" border=0>
</DIV>

L'effetto creato è il seguente:

---

La proprieta' overflow permette di gestire, attraverso l'uso di scroller, i contenuti degli elementi che eccedono l'area impostata con height e width. Perche' cio' accada e' necessario che la proprieta' overflow sia impostata su "scroll" e non su "hidden". In questo secondo caso, infatti, gli elementi vengono visualizzati limitatamente alla grandezza dell'area di ritaglio ma senza lo scroller laterale:

<DIV STYLE="position:absolute; overflow:scroll; float:left; top:10px; left:10px; width:150px; height:100px">
Questo è il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, e di consigli per la programmazione .
</DIV>

<DIV STYLE="position:absolute; overflow:hidden; top:150px; left:10px; width:150px; height:100px">
Questo e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, consigli per la programmazione.
</DIV>

Questo è il risultato dei due esempi:

Questo e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di consigli per la programmazione.

Questo e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di consigli per la programmazione.

Tutti gli elementi supportano il posizionamento statico e relativo, ma solo alcuni quello assoluto. Ecco quali:

Applet Button Div Fieldset

IFrame IMG Input Object

Select Span Table Textarea

---

Sfruttando quanto visto finora per il posizionamento dinamico, possiamo ora esporre un utilizzo pratico di tale tecnologia. Creare titoli con effetto ombreggiato e' possibile in HTML classico esclusivamente con il ricorso a immagini (create con appositi programmi di Webgrafica o fotoritocco). Nulla da eccepire su tale scelta, ma e' ovvio che la presenza di immagini appesantisce la pagina in termini di Kb. Con i CSS-P e' possibile ottenere lo stesso risultato senza usare immagini ma semplice testo. Non si tratta di una procedura molto complessa che anzi per molti versi appare banale. Si crea un testo assegnando uno stile, una grandezza e una certa posizione assoluta nella pagina:

<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:10px; left:10px; color:black; z-index:1">
Zinasoft^®
</DIV>

Per il testo si e' usato il font impact di grandezza pari a 100 pixel e colore nero, distanziato dal margine sinistro e superiore di 10 pixel. La proprieta' z-index e' impostata sul valore positivo 1. Fin qui nulla di particolare, visto che si tratta di un testo nero senza ombreggiatura. Per inserire l'ombra si deve aggiungere questo codice:

<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:15px; left:15px; color:gray; z-index:-1">
Zinasoft^®
</DIV>

Il testo rimane di uguale grandezza e stile ma cambia il colore (dal black precedente al gray attuale). La distanza dello stile dal margine superiore e sinistro aumenta rispettivamente di 5 pixel e la proprieta' z-index e' impostata sul valore negativo -1. Tutto questo crea il primo testo sovrapposto al secondo, che essendo distanziato di 5 pixel ma di uguale dimensione crea un effetto ombreggiato:

Zinasoft^®

Zinasoft^®