z-index does not work with links in different layers

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>

When i click on 'add_to_cart' div element browser redirects me to product.php instead of running add() function. What should i do to figure this out?

Answer 1

The div of class "add_to_cart" has no size. Assign for example width and height like:

<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>

...