Como posicionar elementos graças ao CSS
Existem algumas técnica CSS que permitem posicionar textos e imagens, até mesmo uma página, centrando-os na horizontal ou vertical, em qualquer resolução. Veja o passo a passo abaixo para saber como executar a tarefa, usando as folhas de estilo.
Graças às folhas de estilo, é possível posicionar textos ou imagens com a precisão de um pixel por meio das tags <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.
Foto: © dizanna - 123rf.com
- Posicionar imagem css
- Como posicionar uma imagem em css - Melhores respostas
- Como mover uma imagem no css - Melhores respostas
- Ghost imagem - Dicas -Hardware
- Remover sublinhado link css - Dicas -HTML
- Div transparente css - Dicas -CSS
- Mudar cursor do mouse css - Dicas -CSS
- Em que consiste uma declaração na sintaxe do css - Dicas - CSS
Assine nossa newsletter!
