html - z-index は異なるレイヤーのリンクでは機能しません

Question

<div class='item' style='z-index:0; position:relative;' onClick="document.location.href='product.php'">
    <div class='add_to_cart' style='z-index:99; position:absolute;' onClick='add() /* ajax query */'></div>
...
</div>

「add_to_cart」の div 要素をクリックすると、ブラウザーは add() 関数を実行する代わりに、product.php にリダイレクトします。これを理解するにはどうすればよいですか？

Answer 1

クラス「add_to_cart」の div にはサイズがありません。たとえば、幅と高さを次のように割り当てます。

<div class='item' style='z-index:0; position:relative;' onClick="document.location.href='product.php'">
<div class='add_to_cart' style='widht: 100px; height:10px; z-index:99; position:absolute;' onClick='add() /* ajax query */'></div>

...