Make overlapping div "not clickable" so that content below can be accessed?

Solution 1:

Well there is pointer-events:none; but only few browsers modern browsers (and IE11) support it.

https://developer.mozilla.org/en/CSS/pointer-events

Solution 2:

Yes, its possible

Use pointer-events: none along with conditional statements of CSS for IE11 (as it does not work in IE10 or below), you can get a cross browser compatible solution to achieve this.

Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks propagate through to elements lying bellow.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 conditional:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Here is a basic example page with all the code.