Menu
Possible Duplicate:
Passing mouse clicks through an overlaying element <div>
Is it possible to click the link below the red square without javascript? The red div doesn't need to be clickable.
http://jsfiddle.net/efortis/LNwHV/
#bottom{ width: 100px; height: 100px; background-color: orange; } #top{ width: 50px; height: 50px; position: absolute; left:0; top:0; background-color: rgba(255,0,0,.5); } 
248
This is impossible as a child's z-index is set to the same stacking index as its parent.
The z-index property determines the stack level of an HTML element. The “stack level” refers to the element's position on the Z axis (as opposed to the X axis or Y axis). A higher value means the element will be closer to the top of the stacking order.
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.
The CSS method to do this is pointer-events: none
See: http://jsfiddle.net/LNwHV/1/
Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)
To support old versions of IE, you'll have to use JavaScript as a fallback.
72
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
