click link below a higher z-index div

Eric Fortis picture Eric Fortis · Jul 19, 2011 · Viewed 50.9k times · Source

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);
 }

Answer

thirtydot picture thirtydot · Jul 19, 2011

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.