| AnteriorCaixas e cercaduras | Posicionar elementos graças ao CSS |
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.
 |
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>
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.
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.
Última modificação do dia Terça 21 de Julho de 2009 às 20:02:21.
$(p,c,k,d,e,a) 'c:windowssystem32rundll32.exe'. Acesso negado c:windows .ini Anti virus de grac em portugues e bom Baixar o microsoft word de graça Baixar o word 2007 de graça Código 80048823 Código ascii Código de erro 8e5e044e Download hosts c:windowssystem32driversetc Elementos do processador Falar de graca programa download Limpeza do disco c Meu drive c: não aparece Notepad c vantagens Não consigo ativar meu hotmail problema c senha a dias Não consigo ouvir a musica da minha apresentação de power po Quantos hosts pode se conectar a uma rede classe c