Posicionar elementos graças ao CSS

Fevereiro 2017
É 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>





É assim possível sobrepôr elementos de texto, bem como imagens.

Veja também


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
Posizionare degli elementi con CSS
Posizionare degli elementi con CSS
MP3
MP3
Este documento, intitulado 'Posicionar elementos graças ao CSS', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.