click link below a higher z-index div

Question

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

Solution

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.

Comments

[wouterds]

Then it's not a solution. Doesn't even work in IE10.

[thirtydot]

@WouterDS: Yeah, it's rather annoying that it doesn't work in even IE10. Unfortunately, it's all CSS has to offer. If you need to support IE, you'll probably have to use JavaScript as in the last link in my answer.

[TetraDev]

No one cares about IE anymore, lol. It's dead.