Div absoluta sobreposta

[Lays 1]

Olá, tenho a seguinte situação:

 

Uma div relativa onde apresento informações de um produto, e dentro, uma div absoluta com a imagem de uma faixa que indica que o produto é um lançamento posicionada no canto direito da div pai.

 

O problema é que a div com a faixa de lançamento sobrepõe a imagem do produto que também é um link para maiores detalhes e o link não fica clicável.

 

Preciso que essa div continue sendo exibida sobreposta porém não interfira no conteúdo que está em baixo, como esse link.

 

 

 

Tem alguma forma de resolver?

 

Obrigada

 

 

Segue exemplo do html:

 

<div class="info_produto" style="position: relative;">

 

<div class="lancamento" style="position: absolute; top: -12px right: -12px;">

<img src="imagens/lancamento.gif"/>

</div>

 

<div class="foto_produto">

<a href="produto/produto.htm">

<img src="imagens/foto-produto.jpg"/>

</a>

</div>

 

</div>

[reebr 94]

Pesquise por z-index

[Marcos Souza_22125 0]

<div class="lancamento" style="position: absolute; top: -12px right: -12px ;z-index:2000;">

com isso vai ficar sobre todos os elementos da pagina, mesmo que forem criados depois....

[Lays 1]

Então rnxn e Marcos, com a propriedade z-index ela fica sobre todos os elementos, mas continua atrapalhando o clicar no link que está abaixo dela.

 

Gostaria de uma forma que ela ficasse "por cima" somente visualmente, mas não para o clique do mouse.

[reebr 94]

z-index: -1;

 

?

 

Se eu fosse você, faria o contrário. Deixaria a imagem na div de trás (como background) e colocaria o que é "clicável" por cima. http://jsfiddle.net/wf6Lv/

[Lays 1]

A situação pode ser vista aqui: http://www.gamehard.com.br/default.asp

 

na parte de destaques em baixo, que tem um produto em lançamento. A faixa de lançamento impede que eu clique na imagem.

 

Estou usando uma plataforma em que a imagem com o link do produto é criada em tempo de execução pela adição de uma tag. Só posso alterar o css, não coloco manualmente esse link... se pudesse colocar manualmente, faria uma div "invisível" do mesmo tamanho que a da imagem com o link e usaria o z-index com valor alto. O problema é que não posso mexer. Por isso queria uma forma de a div lançamento aparecer porém não atrapalhar o clicar na imagem

[reebr 94]

Então Lays, o problema é que ambos os elementos são imagens. Se você colocar o "z-index: -1;" nessa div:

<div class="lancamento">
   <!-- codigo -->
</div>

Você vai conseguir o que precisa, porém a imagem do produto vai sobrepor a imagem de lançamento e "esteticamente" o resultado não ficará legal. A menos que, você use uma imagem com fundo transparente...

 

Mas veja aí se é isto mesmo que está querendo.

 

Como sugestão, você pode alterar o HTML? Se sim, ao invés de "linkar" somente a imagem e o nome do produto, faça com que o elemento todo seja um link, assim mesmo que a imagem de lançamento sobreponha a imagem do produto, toda a área será clicável.

<ul id="Dot_ListaProdutosUL" class="Dot_ListaProdutosULClass">
    <li id="Dot_ListaProdutosLI_1" class="Dot_ListaProdutosLIClass">
        <!-- Aqui você faz o link ao invés de linkar somente a imagem/nome do produto -->
        <a href="/produto/6653229/Watch-Dogs">
           <div class="prod_principal"></div>
           <div class="lancamento"></div>
           <div></div>
           <div></div>
           <div></div>
           <div class="valor_de"></div>
           <div class="valor_por"></div>
           <div></div>
           <div></div>
           <div></div>
        </a>
    </li>
</ul>

[Lays 1]

não posso mudar o html... a parte do link "<a href="/produto/6653229/Watch-Dogs"><img alt="Watch Dogs: Clique para ver detalhes" title="Watch Dogs: Clique para ver detalhes" src="/produtos/Watch_Dogs_p.jpg" width="100"></a>"

é toda criada pelo sistema.

 

Se eu pudesse fazer isso aqui (deixar a div lançamento dentro do link):

 

<a href="/produto/6653229/Watch-Dogs">

<div class="lancamento">

<span id="BotaoLancamento_6653229">

<img src="/imagens/BotLancamento.gif" alt="Lançamento">

</span>

</div>

<img alt="Watch Dogs: Clique para ver detalhes" title="Watch Dogs: Clique para ver detalhes" src="/produtos/Watch_Dogs_p.jpg" width="100">

</a>

me resolveria a vida, rs. Mas não posso mudar o link

[reebr 94]

Então complicou... resta a gambiarra :lol: .

 

Ou então, você pode tratar as imagens antes de inseri-las no sistema. Tratar: deixá-las com background transparente. Assim você usa esse código que sugeri acima, do "z-index".

 

Porque ta complicado, "ul, li, img" tem a mesma regra. Então se você mudar algo na imagem de lançamento, afetará a imagem do produto também...

 

Mas, eu acabei dando uma fuçada e o melhor que consegui foi isso:

 

No <div> que tem classe ".prod_principal", coloque esta regra:

height: 140px;
padding: 25px 0px 0px 0px; /* alteração */

No <li> com ID "Dot_ListaProdutosLI_1" coloque esta regra:

position: relative;
text-align: center;
padding: 10px;
border: 1px solid #CCC;
float: left;
margin-top: 10px;
margin-right: 15px;
width: 200px;
min-height: 360px;
z-index: 2; /* alteração */

E por fim, no <div> com classe ".lancamento", esta regra:

position: absolute;
right: -12px;
bottom: 267px;
z-index: -1; /* alteração */

Depois diga se isto resolveu. :thumbsup:

[Lays 1]

Resolvido sim! Terei que usar essa solução mesmo, já que a plataforma só permite imagem .jpg para o produto. Complicado essas coisas que não podemos mudar rs.

 

Muito obrigada pela atenção e ajuda, marcando como resolvido.