Posizionare degli elementi con CSS

Novembre 2016
Grazie ai fogli di stile, è possibile posizionare, con una precisione praticamente vicina al pixel che interessa, un testo o delle immagini ai tag <SPAN> e <DIV>. Questo è possibile con le versioni 4 di Netscape e di Internet Explorer, nonostante questa tecnica resti azzardata e mostri ancora qualche problema di compatibilità.


Posizionamento relativo e assoluto

Il posizionamento assoluto {position: absolute} si determina in rapporto all'angolo superiore sinistro della finestra del navigatore. Le coordinate di un punto si esprimono quindi dall'alto in basso (top) e da sinistra a destra (left).

La posizione relativa si ha invece in rapporto ad altri elementi, come un immagine, cioè gli elementi contenuti nei tag. DIV o SPAN saranno posizionati secondo degli elementi HTML che li precedono:



Posizionare del testo

Posizioniamo il testo "CCM" a 80 pixels nella parte superiore della finestra e a 100 pixels a sinistra della finestra:

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">

CCM
</SPAN>
</BODY>
</HTML>




Esistono altre procedure, come ad esempio:

<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
CCM
</DIV>
</BODY>
</HTML>

Posizionare un'immagine

Posizioniamo l'immagine "test.jpg" a 80 pixels nella parte superiore della finestra e a 100 pixels a sinistra della finestra (l'immagine
sarà 103x61):

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>



È importante specificare la dimensione dell'immagine con i fogli di stile, per evitare le incompatibilità con i navigatori.

Sovrapposizionare degli elementi

Sovrapposizioniamo il testo "CCM" all'immagine
"test.jpg":


<HTML>
<BODY>
<SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
<SPAN style="position: absolute; top: 50 px; left: 100 px;">
CCM
</SPAN>
</BODY>
</HTML>



È inoltre possibile sovrapposizionare degli elementi di testo, nonché delle immagini.

Potrebbe anche interessarti :

Positioning elements in CSS
Positioning elements in CSS
Posicionamiento de los elementos en CSS
Posicionamiento de los elementos en CSS
Mit CSS Elemente positionieren
Mit CSS Elemente positionieren
Positionner des éléments grâce aux CSS
Positionner des éléments grâce aux CSS
Posicionar elementos graças ao CSS
Posicionar elementos graças ao CSS
MP3
MP3
Il documento intitolato « Posizionare degli elementi con CSS » da CCM (it.ccm.net) è reso disponibile sotto i termini della licenza Creative Commons. È possibile copiare, modificare delle copie di questa pagina, nelle condizioni previste dalla licenza, finché questa nota appaia chiaramente.