[Resolvido] Div dentro de div

[José da Silvasauro 7]

Eu tenho uma div com uma imagen, gostaria de colocar uma outra div encima dela com um texto como faço isso?

[Diéssica 140]

Trabalhe com z-index e position.

 

:seta: http://www.html.net/tutorials/css/lesson15.php

[Dian Carlos 29]

Bem, é muito simples..

 

Crie uma div com o id 'img' ou outro qualquer.

 

No CSS defina a div exatamente do tamanho da imagem que você quer por ali, coloque position: relative..

 

Dentro dessa div 'img' coloque a imagem.

 

Ainda dentro da div 'img' coloque por baixo da tag '<img>' a div ou span ou link que você quer que fique voando por cima da imagem.

 

No CSS estilize esse outro elemento do jeito que você quer, e depois defina position: absolute e z-index: 999999, posicione com top e left ou right.

 

Exemplo no código:

<div id="img">

<img src="imagem1.jpg" width="150" height="150">

<div class="texto">Alguma coisa aqui</div>

</div>

 

O CSS fica assim:

 

#img {
position: relative;
width: 150px;
height: 150px;
}
#img .texto {
position: absolute;
top: 5px;
left: 5px;
background: #000; /*Para o velhinho IE*/
background: rgba(0, 0, 0, 0.5); /*cor preta transparente para css3*/
padding: 3px;
border-radius: 2px;
z-index: 999999;
}

 

Tenta ae.

 

Grave essa logica, para quando você precisar fazer alguma outra coisa parecida com isso, você ja vai saber o que fazer..

 

Abrass e boa sorte..

[José da Silvasauro 7]

Opa obrigado funcionou!