Html "Overlay" Which Allows Clicks to Fall Through to Elements Behind It

Click through div to underlying elements

Yes, you CAN do this.

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

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

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.

Make overlay background click-through-able

I've fixed your problem by adding pointer-events: none; to the absolute block.

body {  margin: 0;  padding-left: 10px;  font: 20px Arial, sans-serif;  line-height: 30px;}a:hover {  color: red;}#overlay-blocking,#overlay-passing{  position: absolute;  height: 30px;  width: 10em;  left: 0;}
#overlay-blocking {  top: 30px;  background: rgba(0,100,0, .2);      pointer-events: none;}#overlay-passing {  top: 0;  background: rgba(100,0,0, .2);    }

<a href="#">Link blocked</a><br><a href="#" title="hoverable">Link available</a><br><a href="#" title="hoverable">Link available</a><br>    
<div id="overlay-blocking"></div><div id="overlay-passing"></div>

Allow users to click on elements under a div's blank space?

One option is to apply pointer-events: none to the parent container but then reset it back to auto on child elements:

.interface-overlay {
  /* ... */
  pointer-events: none;
}

.interface-overlay > * {
  pointer-events: auto;
}

html, body {
  margin: 0;
}

.tile {
  opacity:0.8;
  background-color:#ccc;
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  padding: 50px;
}

.interface-overlay {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  padding-left: 20px;
  color: #FFFF;
  pointer-events: none;
}

.interface-overlay > * {
  pointer-events: auto;
}

button.button {
  background-color: red;
}

<div class="interface-overlay">
  <button class="button">Overlay button</button>
</div>
<div class="tile">
  Some tile content.
  <button class="button" onclick="alert('test');">Underlying button</button>
</div>

Click through an element, affecting what's behind it

Use CSS pointer-events:

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

#container-content {
    width:100%;
    height:auto;
    pointer-events: none;
}

If you need support for IE 10 and lower, there's a polyfill.

Click through overlay

You just need to add pointer-events: none; to .overlay

See http://jsfiddle.net/iamnotsam/DV49T/1/ uses SVG for IE9 and IE10 compatibility

For IE 10, there is only partial support for pointer-events: none, specifically the element must be an svg. The above fiddle has been verified on one machine as making IE9 and IE10 happy. Thanks OP for testing.

Passing mouse clicks through an overlaying element <div>

You could try to retrieve the mouse coordinates in your click event and then retrieve an element by hiding your overlay, use document.elementFromPoint(x, y) and then redisplay the overlay.

See this SO question for more info about elementFromPoint:

How do I find the DOM node that is at a given (X,Y) position? (Hit test)