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

Código Htm e Css position:absolute

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

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

Código Html e Css com z-index

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.

• Colocar barra rolagem em div, caixa com scroll
• Div e imagem lado a lado e do texto
• Tipo de fonte para blog e site com Css e html
• Aumentar a imagem ao passar o mouse, com Css
• Como fazer emotions, imagens gif
• Fazer emotions animados, gif online