Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

click link below a higher z-index div [duplicate]

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.

enter image description here

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);  } 
like image 248
Eric Fortis Avatar asked Jul 18 '11 22:07

Eric Fortis


People also ask

Can a child have higher z-index than parent?

This is impossible as a child's z-index is set to the same stacking index as its parent.

Is a higher z-index better?

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.

How do I fix a Z-index problem?

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.


1 Answers

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.

like image 72
thirtydot Avatar answered Oct 09 '22 01:10

thirtydot