Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

*_Charles Potter_*

[Resolvido] Colocar imagem sobre imagem

Por , em Desenvolvimento frontend

Recommended Posts

*_Charles Potter_*    1

*_Charles Potter_*
Postado

Bom Dia Gente,

 

Tipo tenho que fazer o esquema abaixo:

Imagem Postada

O quadrado BRANCO seria a foto do produto e o quadrado LARANJA seria a imagem que eu quero colocar no canto direito inferior da imagen,,,

 

 

Como eu poderia fazer isto?

 

Vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Engloba a foto do produto com uma div com position relative.

E faz o laranja ter um position absolute, ai é só ir setando o bottom, e right... e colocar onde você quer.

 

Pronto ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Fiz um aqui rapidão..

<html>
<head>
<style type="text/css">
body {
	background-color: #000;
}
.container {
	margin: 0 auto; /* só pra jogar pro centro da tela */
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 200px;
}
.imagem {
	float: left;
	width: 250px;
}
.desc {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #f0f;
	bottom: 0;
	right: 0;
}

</style>
</head>
<body>
<div class="container">
	<img src="http://globoesporte.globo.com/Esportes/foto/0,,19129971-EX,00.jpg" alt="" class="imagem" />
	<div class="desc"></div>
</div>
</body>
</html>
^^

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito