Posizionare degli elementi con CSS

Fai una domanda
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 pixel 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.

Foto: © Pixabay.
Jean-François Pillou

I nostri contenuti sono creati in collaborazione con esperti di high-tech, sotto la direzione di Jean-François Pillou, fondatore di CCM.net e digital director del Gruppo Figaro. CCM è un sito di high-tech leader a livello internazionale ed è disponibile in 11 lingue.

Scopri di più sul team CCM

Potrebbe anche interessarti

Ultimo aggiornamento 20 ottobre 2017 alle 14:27 da Antonello Ciccarello.

Il documento intitolato «Posizionare degli elementi con CSS» dal sito CCM (https://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.