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:
logo de 220 por 80 pixel 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:
textoAntesImagemExemplo posicionamentotextoDepoisImagem

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:
logo de 220 por 80 pixel 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.