Texto e imagem sobre imagem ou Div com Html e Css

Vou dar dicas sobre posicionar div e imagens uma sobre a outra, e texto sobre imagem, numa posição pré estabelecida, usando CSS e HTML e DIVs quando necessário.

É algo difícil de explicar e aprender, é bom que você já tenha uma noção de Css e Html, por isso criei outros Exemplos de imagem sobre imagem e códigos, para um blog é um pouco diferente do que seria página individual de um site, pois em sistemas de blogagem fica difícil fazer a imagem ou DIV ficar sobreposta fora do post em uma única página. Se quisesse que uma DIV ou imagem ficasse sobre as outras no blogger talvez seria indicado fazer isso diretamente no html e isso afetaria todas as páginas.

Não sei como isso se comporta em um feed, não testei, mas acredito que ele vai ficar parecido, ou não, pois isso poderia afetar a "transparência" de um site como o FeedBurner. O que quero dizer é que um editor mal-intencionada poderia fazer um elemento oculto em seu artigo ficar visível no feed.

Muitas vezes será preciso criar uma DIV, como para o efeito acima, é bom atentar com a cor dela para contrastar com fonte, poderia ter usado a imagem como background, mas seria para os sites de busca como se não usasse a imagem, se vai ter trabalho pra fazer algo deve mostrar pra eles, mais um pontinho, se a imagem é importante, claro que depende da situação.

No código Html desse Artigo(post), as imagens que você vê acima estão abaixo dessas palavras, e fora dessa DIV com borda azul, da para ter uma noção da "força" de position:absolute e do z-index usado no style Css de cada elemento, porém, é bom usar apenas em últimos casos; tanto pela dificuldade, alguns navegadores não atualizados, questões de acessibilidade, etc.

Imagem 2
Imagem 3 Imagem 4 Imagem 5

Texto sobre imagens

A forma mais fácil de colocar um texto sobre uma imagem seria usando a imagem como fundo(background), mas também pode ser colocada uma imagem e após ela uma DIV contendo o texto, a DIV com position:absolute e tags de alinhamento que posicione essa DIV em cima da imagem ou de outro elemento. Também é bom "cercar" todos esses elementos usando uma DIV com position:relative;
Veja exemplo abaixo:
<DIV style='position:relative;'>
<img src='http://foitestado.com/foitestado.png' style='position:absolute; top:3px; left:1px;' />
<DIV style='position:absolute; top:0px; left:6px; color:red;'> O texto que vai se sobrepor a imagem, é esse
</DIV>
</DIV>

Resultado:

O texto que vai se sobrepor a imagem, é esse

Entender melhor

Para quem não entende muito, se observar no código acima, existem duas DIVs, uma cerca todo os elementos e a outra cerca o texto, no resultado não se enxerga as DIVs, Quando escrevo cercar é quase como isso:
<DIV> assim inicia uma div, no html esse texto estaria cercado(dentro) por uma DIV, ela começou e termina/ fecha assim </DIV>

Dentro de uma DIV pode haver outras, elas servem para organizar, manter as coisa no seu local, posição, etc.

Efeito texto sobre imagem

O que fiz logo acima foi adicionar uma div com posição relative, "isso é como dizer: ali mesmo", e dentro dela uma imagem com posicionamento style topo a 3 pixel e lado esquerdo(left) e, após nova div(com texto dentro) e posicionamento próximo ao da imagem, porém, a segunda DIV com posição absolute, como o da imagem, que obriga ambos a ficar quase no mesmo lugar, a DIV(com texto) ficou sobre a imagem pelo simples fato de ser colocado após a imagem e ser obrigado por position:absolute ... Depois do texto foram fechadas as duas DIVs assim </DIV></DIV>

Entender os códigos Html e Css aqui usados

Qualquer caracter errado ou faltando pode fazer com que o código não funcione.

< caracter para iniciar um elemento(objeto) Html, diz ao navegador que haverá um elemento Html.
img É tag Html para imagem, diz ao navegador que isso será uma imagem.
src=' Indica que você vai escrever o endereço web onde está hospedada a imagem
style=' Indica que haverá estilo(regras ou qualidades) css, valido para a imagem, div, etc, ou seja, entre as aspas está as "regras" para para aquele elemento, podem ser muitas qualidades(estilos).
/> Caracteres para terminar elemento Html, Observe que há uma diferença em fechar uma div e uma imagem, isso porque a div e outros elementos em html podem carregar coisas como texto dentro deles e a imagem é só ela e suas "regras" que ela deve respeitar.

Códigos Css de posicionamento position: absolute;

Como o nome sugestiona faz um elemento ter uma posição absoluta, mas é bom usar propriedades de posicionamento, que vão indicar o local dentro da DIV que o contém(que a cerca), porém, o elemento que contém position: absolute pode ser forçado para fora de uma DIV, se no exemplo acima fosse colocado position: absolute; top: 900px na imagem, ela poderia estar aqui encima do texto, seria como se tivesse saido daquela div.

Propriedades de alinhamento/posicionamento:

top: 3px; Topo, a 3 pixel do topo, o pixel pode ser alterado de acordo com a vontade.
left: 6px; Esquerdo, a 6 pixels do lado da borda
right: 0px; Lado direito
bottom: 4px; Parte de baixo, inferior

Em um mesmo elemento não funcionam juntas top e bottom, assim como não funcionam juntas left e right e os números você pode alterar para conseguir a posição.

position:relative; é uma posição apartir do local onde o elemento foi criado, se fosse inserir uma DIV com position:relative aqui, ela estaria aqui, porém, no mozilla poderia ser usado apenas as propriedades top e bottom, para jogar ela mais acima ou abaixo desse ponto, mas isso deve ser em casos extremos, perceba que, se adicionasse position:relative; bottom:400px em uma div ou imagem criado logo abaixo desse texto, eles iriam subir, pois a base deles é aqui, age de forma diferente do absolute que se baseia na div que o cerca.

Finalizando, no código desse artigo, essa imagem de protesto está no início, pouco abaixo do título, mas ela possui bottom:0 e position:absolute Ela deveria ser a Imagem 1, claro que não preciso dar nome e número a ela.

• Div e imagem lado a lado e do texto
• Colocar barra rolagem em div, caixa com scroll
• Tipo de fonte para blog e site com Css e html
• Aumentar a imagem ao passar o mouse, com Css
• Fazer wallpaper animado online grátis!
• Fazer banner online, grátis!
• Fazer emotions animados online