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

I would like to put a reflection over the entire page. I have a transparent png开发者_JAVA技巧 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?

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/

Why not make the content backgrounds transparent, or with transparent png's?

Or set the opacity for the content as if it's faded into the background. Not sure what you're trying to achieve though I'm sure you can get a similar effect if you try a new approach. From a design point of view I can't imagine how a div over the main content could create an effect not achievable via other methods.