Click Through Div to Underlying Elements

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.

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.

How do I make a div click-through through another div? (navigation bar)

Add z-index: 1 and position: relative for this class.

.site-header__logo {
    text-align: center;
    margin: auto !important;
    max-width: 400px;
    font-size: 1.85714em;
    top: 0;
    height: 90px;
    display: table;
    z-index: 1;
    position: relative;
}

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>

making a div visible but able to click through

No JavaScript needed. Use the CSS pointer-events: none on the div:

#border-overlay {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: solid 8px white;
  pointer-events: none;
}

jsFiddle example

Send click to background div

Consider using elementsFromPoint property of document. (For IE/Edge support use msElementsFromPoint).

I've just added a couple of lines to your JS, see the basic snippet below:

function overlayClick(e) {  alert('overlayClick');  document.elementsFromPoint(e.pageX, e.pageY)  .find(el => el.classList.contains('red') && el.click())}

#wrapper {  position: absolute;  left: 10;  top: 10;  z-index: 1;  width: 200px;  height: 50px;}
#overlay {  position: absolute;  left: 10;  top: 10;  z-index: 2;  opacity: 0.5;  background-color: magenta;  width: 200px;  height: 100px;  overflow: scroll;}
.red {  background-color: red;  color: yellow;}

<div id="wrapper">  <table>    <tr><td onclick="alert('1')" class="red">111111</td></tr>    <tr><td>2</td></tr>    <tr><td onclick="alert('3')" class="red">333333</td></tr>    <tr><td>4</td></tr>    <tr><td>5</td></tr>    <tr><td onclick="alert('6')" class="red">666666</td></tr>    <tr><td>7</td></tr>    <tr><td>8</td></tr>    <tr><td>9</td></tr>    <tr><td>10</td></tr>  </table>  <p>  The ones, threes and sixes should be clickable, and the magenta div should be scrollable.  </p></div><div id="overlay" onclick="overlayClick(event)">  <div>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis tempus est, sit amet faucibus neque congue eu. Aliquam porta enim tortor, condimentum auctor urna vehicula eu. Suspendisse blandit sapien sapien, eu volutpat odio venenatis eleifend. Donec imperdiet maximus posuere. Mauris rutrum venenatis massa et sodales. Nullam convallis sodales tellus. Ut sodales sem nec lacus viverra, nec vehicula enim dictum. Nam sed molestie massa. Vestibulum eget dui felis. Mauris consequat mauris nec nibh aliquam dapibus. Phasellus id laoreet est. Donec sit amet egestas ex, id malesuada dui. Donec imperdiet, sapien ac dignissim dignissim, lectus dolor convallis sapien, vel elementum arcu leo vel diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  </div></div>

Click Through Div to Underlying Elements