Como posicionar elementos graças ao CSS

Agosto 2017


Graças às folhas de estilo, é possível posicionar textos ou imagens com a precisão de um pixel por meio das balizas <SPAN> e <DIV>. Isto pode ser feito com a versão 4 do Netscape e com o Internet Explorer. Não obstante, esta técnica continua a ser arriscada e apresenta ainda alguns problemas de compatibilidade.

Como se determinam o posicionamento relativo e o posicionamento absoluto

O posicionamento absoluto {posição: absolute} é determinado 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 é feita 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 eles se encontram:



Como posicionar o texto

Posicionemos o texto 'Comment ça marche?' (Como funciona?, em francês) a 80 pixels da parte superior da janela e 100 pixels à esquerda da janela:


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



Há outras maneiras de proceder, como esta:

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

Como posicionar uma imagem

Posicionemos a imagem “test.jpg” a 80 pixels da parte superior da janela e 100 pixels à 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 o tamanho da imagem com as folhas de estilo, por razões de incompatibilidade dos navegadores.

Como sobrepor elementos

Vamos sobrepor o texto 'Como funciona?' à 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;">
Como funciona?
</SPAN>
</BODY>
</HTML>



Assim é possível sobrepor elementos de texto e 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
Última modificação: 6 de abril de 2017 às 15:30 por Pedro.Saude.
Este documento, intitulado 'Como 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.