O recurso e como usar
A posição absolute é muito útil para posicionar elementos na tela mas
tem que conhecer bem este recurso para seu uso correto.
A primeira coisa importante é não esquecer que a âncora do elemento atual com position absolute será colocada a partir do elemento pai ou container e NÃO na posição como seria normal, com position static.
Um conselho : redimensione o tamanho da janela para ver o que acontece com os elementos com a posição absolute. Como ela é ancorada no elemento containter podemos ter surpresas.
Nos exemplos abaixo, a imagem originalmente tem 100 px largura por 132 px altura.
Exemplo 1 : Alinhando a imagem à esquerda.
Como o estilo do id 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 position:absolute não é considrado no 'fluxo normal' a mensagem foi renderizada e em cima foi rendeizada a 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.
Importante : O tamanho ocupado pela imagem não foi levado em conta. Para que
a mensagem 'Note que...' fosse exibida abaixo e distante da imagem eu adicionei
4 espaçamentos de linha (<br />)para que se distanciasse da imagem.
Se achou bizarro essa superposição experimente redimensionar a janela do browser.
Note que a âncora com o objeto pai ficou firme e forte.
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:
textoAntesImagemtextoDepoisImagem
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.
Para que a mensagem 'Até que não saiu mal...' saisse embaixo da imagem coloquei 4 brs ou linhas em branco. Friso novamente que o espaço ocupado pela imagem não é contabilizado pelo browser no position absolute.
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>
Texto Antes Imagem <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:
Texto Antes Imagem
imagem alinhada ao centro
Como pode notar a imagem não apareceu no meio da tela, bem, aonde queriamos. Foi exibida bem acima, no começo da página por causa do elemento pai ou container.
Isto ocorreu porque a tag img esta dentro de uma tag p que esta dentro de uma
tag div que esta dentro de uma tag body. O position absolute fixou a posição
da imagem em relação a div inicial do documento e não em relação a tag p pai.
Não se esqueça que o browser monta a página na sua estrutura interna do DOM e depois a exibe e isto faz esse tipo de efeito na página...uma coisa definida muito depois aparece muito antes do que era esperado.
Alinhando tags inline sem position absolute
Alinhando uma imagem (ou outra tag inline) no centro da página
Uma recomendação, se tiver que alinhar uma tag tipo em linha (inline) qualquer no documento você sabe que isso não é possível pelo default do browser ser static e os elementos em linha ocuparem somente o espaço que precisam, apenas as tags tipo block podem ser 'estilizadas'. Portanto a primeira coisa é colocar nossa tag tipo inline dentro de uma tag tipo block, ou seja, dentro de um parágrafo, uma div etc e apartir daí aplicar na tag tipo bloco um estilo que centraliza. Veja o exemplo abaixo:
Como o browser exibe:
Como foi codificado:
<p style="text-align: center;">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
Isto resolve o problema para uma imagem mas e se forem duas, uma à direita e uma a esquerda.
Alinhando duas imagens (ou outras tag tipo inline) a direita e a esqueda da tela
Não se esqueça que queremos ambas na mesma linha do browser, portanto não podemos colocar uma tag block alinhada à direita e outra tag tipo block alinhada à esquerda porque seriam renderizadas em linhas diferentes.
Para solucionar este caso temos o estilo float onde podemos colocar um elemento alinhado a esquerda ou a direita. Veja o exemplo abaixo :
Como o browser exibe:
Como foi codificado:
<p style="float:left">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
<p style="float:right">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
Nota : Para que a mensagem Como foi codificado: não ficasse no meio das imagens foi utilizado o estilo clear:both; no parágrafo da mensagem.
É importante frisar que apesar da tag p ser em bloco as duas tags p foram exibidas na mesma linha por causa do estilo float.
Como você pode notar as imagens foram exibidas nas margens esquerdas e direita da página e estão relativas ao container da página que dão um espaço entre as laterais e o conteúdo da página. O efeito desejado era exatamente este.
Exibindo 3 imagens na mesma linha
Agora a coisa pega. Sabemos que float alinha à direita e à esquerda mas não tem um center ou middle.
A primeira coisa é tentar fazer somando os 2 efeitos acima : o float alinha a esquerda e a direita enquanto o text-align:center alinha a imagem do centro. Veja abaixo:
Como o browser exibe:
Como foi codificado:
<p style="text-align: center;">
<p style="float:left">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
<p style="float:right">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
</p>
Infelizmente a imagem central não ficou alinhada ao centro da tela.
Alinhando 3 imagens na mesma linha
Vamos ao que interessa. O erro esta na imagem central. Se eu pedir para que seu estilo seja float-left ela ficará grudada à esquerda da primeira imagem alinhada à esquerda. E se eu der nessa imagem central um margin-left, resolve ?. Veja abaixo:
Como o browser exibe:
Como foi codificado:
<p style="width:100%;text-align: center;">
<p style="float:left">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
<p style="float:left;margin-left:20%;">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
<p style="float:right">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
</p>
O que acha, resolveu ? Parece que sim mas nem sempre. Se você está fazendo um site responsivo, não resolveu não. Diminua a largura da tela e veja que o espaçamento do elemento central continua constante, deveria ser 20% mas não esta resposivo, o espaçamento não muda com a diminuição da tela.
Alinhando 3 imagens na mesma linha - versão final e correta
Como o browser exibe:
Como o foi codificado:
<p style="width:100%;text-align: center;">
<p style="float:left">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
<p style="float:right">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
<p style="position:relative;margin-left:40%;margin-right:40%;">
<img src="../imagens/w3jquery.gif" width="220" height="220" alt="logo de 220 por 80 pixel">
</p>
</p>
As coisas mais óbvias não funcionaram :
1-margin-left: 0px auto;
2-margin-left: auto;
3-margin-left:auto;margin-right:auto;
Funcionou como esperado e só não ficou melhor porque as imagens são grandes e ao compactar a largura da página do browser ele escolhe o que compactar e às vezes toma a decisão errada, era para compactar todos os espaços igualmente mas ele compactou mas o espaço à direita que os espaços à esquerda. Se quiser resolver esse problema recomendo media queries que permite aplicar um estilo de acordo com a largura da tela. Fica perfeito só que dá bastante trabalho porque você vai criar uma css para cada largura de tela.