How to allow clicking on elements behind elements with a higher z-index

Question

I would like to put a reflection over the entire page. I have a transparent png that fades from white to transparent and I would like it to fill the browser and be displayed above everything else but allow the user to click on everything behind it, not be able to be dragged, and work in all browsers. Is this possible?

Answer 1

You can use pointer-events: none, which works everywhere except IE10 and older.

A blog post with more information:

http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/