Sometimes doe to the requirements of a project you need to implement a functionality when you need to click through an overlay to get the element behind that overlay, this can be achived in many ways but for me only one method worked. As I said there are a lot of methods to do that, the easiest way to click through an overlay is with a single line of css. But this method is not so accurate if you need to implement complex scripts. 

For this method all you need to to is to add the following line of css on your overlay, then browser will behave as if the overlay is not there, but if you will click on a link it will work too, only if you will prevent event for all links from your website.

pointer-events: none;

As I said this is the easiest method but is far from being the best, however it can be all you need but again it depends on what you need to do after you click through that overlay, if you need the user to be able to behave normally even if the overlay is there this method will work, but if you need the get the clicked element in a variable this method will not work that good becuase you will need to make extra checks and you probably complicate yourself much more.

In the part 2 of this tutorial I will show you another method for how to click through an overlay with jquery, this method I like the most because you have total access to all elements in your website and you can do anything you want because you can get the element in a jquery variable and you will decide what will be the next step in this process.