Menu
I have the following div set which only works in IE9. On Moz and Webkit the onclick will not fire. If I chaneg the z-index to 0, the onclick works, but I have visibility issues with other elements in the site. Is there a way to get onclick to fire with negative z-indices?
<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">
492
You can have negative z-index To place an element on a layer below another one, it just has to have a lower value of z-index but that lower value can be negative. One area where this is useful is when using pseudo elements and wanting to position them behind the content of their parent element.
Setting negative z-index (< 0) to an element will stack the element behind its parent. However, if the parent is the root element of a stacking context, <html> creates the default stacking context, a negative z-index will still stack in front of the parent element.
z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.
Having a z-index of - here is definitely the problem. What is happening in Moz/Webkit is the outcome to be expected, you must have an invisible/transparent laying over the object that is picking up the click, thus not letting it go through to the actual link.
There are several things you can do..
1) Find the object that is over-lying it (Pretty easy in Chrome, just right click - inspect element, and usually the direct element under the mouse will be automatically highlighted in the inspector. Then for this element give a css rule of:
pointer-events: none;
This allows the click to register through it and to the object below. Please note browser support for this isn't great, so I'd suggest another solution:
2) Restructure your code so that you don't run into this problem, in the logical world why would you have anything over the top of a link anyway, it's down to poor structuring really, re-think your margins/paddings, or make a jsfiddle so we can have a better look :).
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
