Posicionar elementos graças ao CSS

É possível, graças às folhas de estilo, posicionar texto ou imagens com a precisão de um pixel, graças às balizas <SPAN> e <DIV>.
Isto é possível com as versões 4 de Netscape e Internet Explorer. Não obstante, esta técnica continua a ser arriscada e apresenta ainda alguns problemas de compatibilidade.

Posicionamento relativo e absoluto

Posicionamento absoluto {posição: absolute} determina-se em relação ao canto superior esquerdo da janela do navegador. As coordenadas de um ponto exprimem-se então de cima para baixo (top) e da esquerda para a direita (left).

A posição relativa faz-se em relação a outros elementos, como uma imagem, o que quer dizer que os elementos contidos nas balizas DIV ou SPAN serão posicionados na sequência dos elementos HTML depois dos quais se encontram.

Posicionar do texto

Posicionemos o texto "Comment ça marche?" a 80 pixéis da parte superior da janela e 100 pixéis à esquerda da janela :

<HTML> 
<BODY> 
<SPAN style="position: absolute; top: 80 px; left: 100 px;"> 
Comment ça marche? 
</SPAN> 
</BODY> 
</HTML>

Há outras maneiras de proceder, aqui está uma:

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

Posicionar uma imagem

Posicionemos a imagem “test.jpg” a 80 pixéis da parte superior da janela e 100 pixéis à esquerda da janela (a imagem tem 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 especificar a dimensão da imagem com as folhas de estilo, por razões de incompatibilidade dos navegadores.

Sobrepor elementos

Sobreponhamos o texto "Comment ça marche?" à imagem “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;"> 
Comment ça marche? 
</SPAN> 
</BODY> 
</HTML>