CSS - Position Absolute - Posicionando uma imagem na página
A posição absolute é muito útil para posicionar elementos na tela.
Não se esqueça que a âncora do elemento atual será colocada a partir do
elemento pai ou container.
Nos exemplos abaixo, a imagem originalmente tem 100 px largura por 132 px altura
Exemplo 1 : Alinhando a imagem à esquerda.
Como foi definido:
<!-- alinha a esquerda-->
<style type="text/css">
#imgesq {
position: absolute;
left: 10%;
}
</style>
<img src="../imagens/w3jquery.gif" alt="logo de 220 por 80 pixel" id="imgesq">
imagem alinhada à esquerda
Como o browser exibe:
imagem alinhada à esquerda
Note que a mensagem 'imagem alinhada à esquerda' foi sobrescrita pela imagem
porque foi utilizado o position static para exibir a mensagem e como o
display:absolute não é considrado no 'fluxo normal' a mensagem foi renderizada
em baixo da imagem. Tecnicamente a mensagem deveria ser escrita sobre a imagem
já que foi processada depois mas isso o browser controlou e deixou a imagem
por cima.
Esta mensagem só não saiu em cima ou em baixo da imagem porque coloquei
6 espaçamentos de linha (<br />)para que se distanciasse da imagem.
Se achou bizarro essa superposição experimente redimensionar a janela do browser.
Veja para mais detalhes .
Exemplo 2 : Alinhando a imagem à direita da tela.
Como foi definido:
<!-- alinha ao direita-->
<style type="text/css">
#imgdir {
position: absolute;
left: 90%;
}
</style>
textoAntesImagem
<img src="../imagens/w3jquery.gif" alt="Exemplo posicionamento" id="imgdir">imagem alinhada à direita
textoDepoisImagem
Como o browser exibe:
textoAntesImagem
textoDepoisImagem
Até que não saiu mal mas novamente o texto que segue as mensagens de texto foram exibidas
completamente fora de posição porque seguiram o fluxo normal enquanto a mensagem não.
Exemplo 3 : Alinhando a imagem ao centro da tela.
Como foi definido:
<!-- alinha ao centro-->
<style type="text/css">
#imgcentro {
position: absolute;
left: 50%;
top: 50%;
}
</style>
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel" id="imgcentro">
imagem alinhada ao centro
Como o browser exibe:
imagem alinhada ao centro
Como pode notar a imagem apareceu no meio da tela assim que a página foi exibida
e totalmente deslocada em relação a altura da página que deveria ser exibida.
Isto ocorreu porque a tag img esta dentro de uma tag div que esta dentro de uma tag
body. O fixed fixou a posição da imagem em relação a div inicial do documento.