Tricks for the Web Tricks for the Web - 13 days ago 5
CSS Question

Make element appear on top, but underneath clickable

I'm trying to make a notification system where a small box appears in the top right corner of the screen.enter image description here
However, I want the part of the screen that is under the notification to be clickable. As it is now, when the notification is there, you can't interact with what's under it. How can I make the area under it clickable? I've tried messing around with the

z-index
,
position
, and
transform
properties, but they still make the notification appear on top of the other content.

Answer

Use pointer-events: none on the popup box to allow clicks and cursor interactions to pass through it.

Note that this is not supported by IE10 or under, but that makes up a very small percentage of users.

http://caniuse.com/pointer-events/embed/

Comments