Imagem sob imagem e div | Div e imagem sobre objetos, com z-index

Home | Texto e imagem sobre imagem e Div com Html e Css | Exp: Div e imagem sobre imagem com código Html e Css

<< Voltar

Exemplo Div e imagem sobre imagem com código Html e Css

Exemplo: Div e imagem com position:absolute e relative

DIV 1
DIV 2
Mostrarei exemplos e os códigos deles, nesse ao lado as imagens estão visualmente em ordem, mas no código, como pode ser visto abaixo, elas não estão nessa mesma ordem, mas sim em ordem invertida. No código, foi colocado dessa forma para que a Imagem A ficasse sobre as outras, perceba que a imagem escrita abaixo/depois fica sobre as outras, e, com position:absolute nelas é possível "jogar" mais para a direita, esquerda, acima, ou abaixo. Tags como o left e número de px, nesse caso ele indica a quantos pixeis(px) da esquerda cada elemento vai se posicionar.
DIV 3 VAZIA
Imagem emotion animado Imagem exemplo D Imagem exemplo C Imagem exemplo B Imagem exemplo A
Código Htm e Css position:absolute
<div style='position:relative; width:822px; border:solid 3px red; padding:4px;'>
DIV 1

<div style='position:relative; width:502px; top:2px; float:right; border:solid 3px green; margin:4px; height:300px;'>
DIV 2
</div>

<div style='clear:both; border:solid 1px blue;'>DIV 3 VAZIA</div>

<img src='/images/emotion-animado.gif' alt='Emotion animado' title='Emotion animado' style='position:absolute; left:150px; top: 24px;'/>
<img src='http://foitestado.com/images/imagem-D.GIF' alt='Imagem D' title='Imagem D' style='position:absolute; left:120px; top:24px;'/>
<img src='http://foitestado.com/images/imagem-C.GIF' alt='Imagem C' title='Imagem C' style='position:absolute; left:90px; top:24px;' />
<img src='http://foitestado.com/images/imagem-B.GIF' alt='Imagem B' title='Imagem B' style='position:absolute; left:60px; top:43px;'/>
<img src='http://foitestado.com/images/imagem-A.GIF' alt='Imagem A' title='Imagem A' style='position:absolute; left:30px; top:24px;'/>

PODERIA TER TEXTO AQUI
</div>

Como funciona códigos com position:absolute

Como pode ser percebido no código acima, foi criado uma DIV 1 com position:relative para cercar(envolver, conter, limitar) os outros elementos principalmente aqueles com position:absolute e, isso é válido para imagens, DIVs, etc.

As imagens estão a uma distancia do topo top:24px e apenas uma está com a posição diferente, e, na distancia da lateral esquerda(left) todas tem uma posição diferente, mas, o mais interessante a ser notado é que no código a ultima imagem(mais de abaixo) é que fica sobre as outras, seria como largar uma folha sobre a outra, na visualização a Imagem C está sob(Debaixo de) B que está sob A .

Perceba que quando existem, no código, dois elementos com a mesma posição, o ultimo elemento colocado no código fica sobre os outros na visualização, desde que não estejam usando z-index

As DIVs
Enumerei as DIVs para facilitar o entendimento, e, a DIV 1 não tem nada de mais, só serve para manter os outros elementos organizados.

DIV 2 nesse caso tem uma boa utilidade, por ter um pequeno texto ela serve como um limitador de altura, pode não ser necessário o uso de altura(height) nela, isso se você souber que a quantia de palavras nela fazem superar a altura das imagens. Se a DIV 2 não estivesse localizada ao lado ou não tivesse uma largura especifica, o texto poderia ficar escondido sob as imagens, já que as imagens tem position:absolute. Isso mostra que problemas são contornáveis, e pode ser criado um elemento para solucionar.

DIV 3 serve unicamente como um separador, o clear:both na DIV3 serve a isso, então, a DIV 3 foi criada para que textos, imagens ou DIVs que sejam colocados depois dela não "subam", pois quando se usa um elemento com position:absolute(as imagens) ou float, esses permitem que outros colocados após eles fiquem sobre eles ou ao seu lado(float), a função dessa DIV 3 é impedir isso, porém, não funciona bem para position:absolute por isso vou mostrar alguns exemplos de DIVs que podem ser associadas ao uso de position;absolute

Na DIV 3 coloquei uma borda e dentro dela palavras, apenas para ser notada, mas na verdade ela pode ser vazia e sem borda.

Exemplo: Problema DIV sem clear:both
DIV 1
DIV 2

AS IMAGENS PODERIAM ESTAR AQUI

Imagem emotion animado Imagem D Imagem C Imagem B Imagem A No mozilla e talvez em outros navegadores a DIV 1 está terminando antes das outras que estão dentro dela, é falta de DIV com clear:both Esse exemplo só tem essa função, a única diferença desse exemplo e o exemplo abaixo é que aqui não tem esse código: <div style='clear:both;'></div>

Exemplo: Div e imagem sobre... com z-index

DIV 1 TEXTO OU ELEMENTO AQUI PODE EMPURRAR DIV 2 PARA BAIXO
DIV 2

AS IMAGENS PODERIAM ESTAR AQUI

Imagem emotion animado Imagem D Imagem C Imagem B Imagem A
LADO DA DIV 2
Código Html e Css com z-index
<div style='position:relative; width:852px; border:solid 3px red; padding:4px;'>
DIV 1 TEXTO OU ELEMENTO AQUI EMPURRA DIV 2 PARA BAIXO

<div style='position:relative; width:200px; float:left; border:solid 4px green; margin:8px; height:110px; z-index:1;'>
<span style='background:green;color:#fff;'> DIV 2 </span><br/><br/>
AS IMAGENS PODERIAM ESTAR AQUI
</div>

<img src='/images/emotion-animado.gif' alt='Emotion animado' title='Emotion animado' style='position:absolute; left:135px; top: -14px; z-index:3;'/>
<img src='http://foitestado.com/images/imagem-D.GIF' alt='Imagem D' title='Imagem D' style='position:absolute; left:110px; top:24px;'/>
<img src='http://foitestado.com/images/imagem-C.GIF' alt='Imagem C' title='Imagem C' style='position:absolute; left:85px; top:5px; z-index:2;' />
<img src='http://foitestado.com/images/imagem-B.GIF' alt='Imagem B' title='Imagem B' style='position:absolute; left:60px; top:24px;'/>
<img src='http://foitestado.com/images/imagem-A.GIF' alt='Imagem A' title='Imagem A' style='position:absolute; left:35px; top:24px;'/>

LADO DA DIV 2

<div style='clear:both; border:solid 1px blue;'></div>

Como funciona o z-index

Esse exemplo tem a função de mostrar o funcionamento da propriedade z-index em um objeto/elemento. Destaquei a posição top da Imagem C e Emotion animado, para as outras aparecerem, mas isso não tem nenhuma relação com z-index, portanto não confunda o fato dessas imagens estarem mais para cima com estar sobre as outras. Também não confunda o número dado a cada DIV, eles não influenciam no Html ou Css, só servem para tentar demonstrar onde fica cada DIV
Por padrão, um elemento que contém position:absolute fica sobre outro quando ele é colocado(no código) depois/abaixo de outro, mas com o uso de z-index isso muda, o fato de tê-lo em seu estilo faz com que, o elemento que conter z-index vai ficar sobre o outro, mas o elemento com z-index de número maior fica sobre os elementos com z-index menor.

O que acontece nesse exemplo é que a DIV 2 tem z-index e só por isso está sobre as Imagens A, B e D.
Depois a Imagem C tem z-index:2; o que faz ela ficar sobre a DIV 2(que tem z-index:1) e sobre as imagens sem z-index no seu código(style)
Logo após, a imagem Emotion animado, contém z-index:3 que deixa ela sobre a Imagem C, DIV 2 e sobre as outras sem z-index.

No exemplo acima a DIV 2 tem também a função de delimitar a altura da DIV 1 e proteger as imagens para que o texto da DIV 1 não fique naquele local.

Observe que o código da DIV 2 tem um height o que garante uma altura, nesse caso, maior que as imagens, assim "protege" elas, ou seja, a DIV 2 impede que outros elementos fiquem naquele local, se ela não tivesse a borda e estivesse vazia ninguém notaria ela, mas para isso a DIV 2 precisa ter position:relative; Uma forma mais adequada seria colocar as imagens dentro dela, não o fiz, apenas porque queria usá-la para mostrar como funciona o z-index.

Finalmente, uma brincadeirinha, nesse exemplo acima, "na DIV 2", tente copiar ou baixar a imagem D usando o mouse, você não conseguirá, pois a DIV 2 está sobre ela, mas isso não seria problema para quem entende um pouco de Html.