Neste artigo mostrarei de forma bem simples como sobrepor duas imagens usando o DIV e CSS. A verdade é que você pode criar o mesmo efeito usando apenas HTML, colocando uma imagem de fundo na tabela e carregando a segunda na mesma tabela via IMG SRC. Porém, existem situações em que nãoo podemos (ou nãoo queremos) deixar a imagem de fundo e, às vezes, somos obrigados a editá-las em um software de imagens para inserir o texto. Agora, com a dica deste artigo, você podera gerar o mesmo efeito de forma mais prática.

Abaixo seguem as duas imagens que serão sobrepostas e a seguir o efeito desejado:

 

Imagem 1	Imagem 2 (fundo transparente)

Abaixo as imagens sobrepostas:

<div style='position:relative; top:0px; left:0px;'>
<img src=http://www.digitravel.com.br/imagens/promolasvegas.jpg border=0>
<div style='position:absolute; top:110px; left:6px;'>
<img src=http://www.digitravel.com.br/imagens/desconto.

Antes de explicar o código acima, é importante entender um pouco sobre DIVs e CSS. As DIVs em HTML nada mais são do que blocos (ou containers) onde podemos inserir um conteúdo de texto ou imagem. A vantagem de usar DIV é que você pode estilizá-la e formatar seu conteúdo. É nesse momento que entra em cena o CSS (Cascading Style Sheets = Folhas de estilo em cascata) e suas propriedades.

No exemplo acima, o que fiz foi criar duas DIVs. A primeira DIV cerca (engloba) todos os elementos, ou seja, cerca a primeira imagem e também a segunda DIV. A Segunda DIV cerca apenas a segunda imagem. A primeira DIV, por cercar todos os elementos, é chamada de DIV pai (parent). Para que as imagens fiquem sobrepostas e posicionadas da forma que queremos, usamos a propriedade CSSposition. No exemplo, usamos a position:relative para a DIV pai e position:absolute para a DIV filho.

A segunda imagem ficou posicionada sobre a primeira, pois foi colocada na DIV depois com position:absolute. Por padrão, um elemento que contém position:absolute se sobrepõe ao outro no código. É importante dizer ainda sobre uma outra propriedade (que não aprofundarei neste artigo) chamada z-index, com a qual é possível alterar a ordem de sobreposição dos elementos.

Entendendo um pouco sobre os positions relative e absolute

Os positions precisam de um ponto referência para posicionar a imagem ou o texto da DIV. Esse ponto, no caso do position:relative, é o canto superior esquerdo da própria DIV, ou seja, ele posiciona o elemento em relação a ele mesmo. Portanto, no nosso exemplo, a imagem será sempre posicionada rente ao canto superior esquerdo da própria DIV, pois eliminei as margens colocando 0 px no “top” e no “left”.

O position:absolute, diferentemente do position:relative, utiliza como referência o ponto superior esquerdo de seu DIV pai. No nosso exemplo, portanto, eu posicionei a imagem “desconto.gif” distante 110 px (top: 110 px;) do topo da DIV pai e 6 px (left: 6 px;) da margem esquerda da DIV pai, gerando a sobreposição desejada.

Você pode também usar esta dica para sobrepor textos sobre imagens. Para isso, basta alterar o conteúdo da segunda DIV por um texto.

Os positions não são as únicas propriedades que ajudam a organizar os elementos em uma página. Existem diversos outros efeitos interessantes que podem ser gerados usando DIVs e CSS. Outra propriedade muito importante do CSS, principalmente para organização de layouts das páginas, a a propriedade float, que abordarei no meu próximo artigo.

Espero que a dica tenha sido útil. Até o próximo artigo!