Onclick does not work in webkit or mozilla when z-index is a negative value

Question

I have the following set of div that only works in IE9. On Moz and Webkit, onclick will not start. If I change the z-index to 0, onclick works, but I have problems with visibility with other elements on the site. Is there a way to activate onclick with negative z-indexes?

<div id="adbg" style="margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor: pointer; z-index: -1;"> <div OnClick="window.open('/bgClicks/2');" style="background: #fff url('http://www.example.com/img/bg/w_1.jpg') no-repeat center top fixed; height: 100%; width: 100%; margin: 0pt auto; cursor: pointer;"></div> </div> <div id="wrapper"> 

Answer 1

Having a z-index - definitely a problem here. What happens in Moz / Webkit is the expected result, you should have an invisible / transparent add-on on the object that is gaining a click, thus preventing it from navigating to the actual link.

There are a few things you can do.
1) Find the object that is above it (quite easy in Chrome, just right-click - check the item, and usually the direct item under the mouse will be automatically selected in the inspector. Then the css rule is given for this item:

 pointer-events: none; 

This allows the click to register through it and to the object below. Pay attention to browser support because it is not very convenient, so I would suggest another solution:

2) Restructure your code so that you do not encounter this problem, in the logical world, why in any case you have something at the top of the link, this is actually a bad structuring, change your mind / paddings, or do jsfiddle , so we can look better :).