1

Estou tentando aplicar uma solução em uma div em meu projeto, mas não estou conseguindo, fiz um teste no JSFiddle deu certo, como pode ser visto aqui, pela minha limitação em css estou tendo dificuldade em implementar.

.produtos-wrapper{
   position:relative;
}
.imagem-mascara {
   width:100px; /* largura da imagem máscara */
   height:68px; /* altura da imagem máscara */
   position:absolute;
   top:0;
   left:0;
   background:url(http://moveissaobento.com.br/msb/imagens/tag-lancamento.png) 0 0 no-repeat; /* imagem máscara */
}
<div class="produtos-wrapper">
   <img src="http://moveissaobento.com.br/msb/imagens/img.png" width="191" height="117" border="0" />
   <div class="imagem-mascara"></div>
</div>

JSFiddle

E preciso aplicar no meu site nesse caso aqui:

Página para exibição

Vejam que a imagem está no canto superior do site.

1

1 Resposta 1

3

Você esqueceu de colocar position: relative; na classe .produtos-wrapper do seu site.

.produtos-wrapper{
   position:relative;
}

Isso faz com que as divs com position: absolute; dentro de .produtos-wrapper fiquem com o posicionamento relativo à esta.

Está funcionando exatamente como seu exemplo no JSFiddle.

6
  • Muito bom... eu já estava pensando em readaptar pra usar com seletores :before... kkk, talvez seja meu modo de trabalhar mesmo que influencia na decisão ou meu pouco conhecimento de css também. 13/02/2015 às 17:48
  • Olá @André Ribeiro, só mais uma dúvida, a imagem não sendo repetida como deveria, será que cometi alguma falha? 13/02/2015 às 18:03
  • @adventistapr como assim repetida? 13/02/2015 às 19:26
  • Olá @André Ribeiro, é que essas imagens estão dentro de um loop e não está repetindo, quando redimensiono o navegador ela aparece repetida. 13/02/2015 às 19:35
  • @adventistapr Adicione position:relative também à sua classe .produtos-conteudo. Parece que resolve o problema. 13/02/2015 às 19:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .