Onde um link envolve elementos de bloco, incluindo uma imagem, e todos os elementos precisam ser clicáveis.
No caso de uso abaixo, a imagem redefine a ordem de empilhamento e sempre estará no topo e sempre será impossível de clicar sem uma correção.
No meu uso pessoal, o div com id “text-wrap” era absolutamente posicionado em cima de seu irmão e não tinha efeito na capacidade de clicar da imagem, desde que tivesse um fundo transparente.
Depois de lutar contra o bug do Z-index com várias soluções de posicionamento e empilhamento, descobri uma solução não ideal, mas perfeitamente funcional sem usar JavaScript. Ao aplicar um gif transparente ao div com id de “text-wrap”, a âncora inteira agora pode ser clicada.
Parece que se um div tiver um fundo transparente ou nenhum fundo explícito definido, um clique filtrará o div para o próximo elemento abaixo.
Caso de uso:
<a>
<div id="image-wrap">
<img>
</div>
<div id="text-wrap">
<p>Some text, etc.</p>
</div>
</a>Na realidade, tudo o que isso está fazendo é cobrir a imagem com outra imagem (que também redefine a ordem de empilhamento), de modo que não torna a primeira imagem clicável. No entanto, torna possível a interação do usuário desejada.