Click through an element, affecting what's behind it

Question

So, I was going to make an overlay thing for my website where an element is fixed over the site and placed above everything. But this means that nothing else behind the element can be effected.

Here's a JSFiddle reproducing this problem.

You'll notice that you cannot highlight the black text, and the JavaScript event doesn't fire.

Here is the CSS + HTML I've used to create this problem:

HTML

<div id="main-container">
    <div id="container-content">You can't highlight me! D:</div>
    <div id="container-fixed"><div style="margin:90px auto;background:red;width:40px;height:40px;"></div>You cannot highlight the text behind this DIV.  It also doesn't fire click events.</div>
</div>

main-container: This holds the content.

container-content: This is the content behind the fixed DIV

container-fixed: This is the DIV the overlaps "container-content"

CSS

#main-container {
    width: 90%;
    margin: 5%;
    position: relative;
    height: 500px;
    overflow: auto;
}

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

#container-fixed {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: red;
}

Is what I'm trying to achieve even possible? Both CSS and JavaScript (jQuery) answers are allowed.

Actually, I can select both the red and black text in the jsfidddle ( on Chrome 36) — singe3, Jul 21 '14 at 06:55
I'm using Chromium 34 on Linux. You can select, just not individual bits. If you triple click it selects all the text. Otherwise I cannot select text. Also keep in mind, that I need JavaScript events to be fired too. — , Jul 21 '14 at 06:56

rink.attendant.6 · Accepted Answer · 2014-07-22T00:00:20.757

16

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.

edited Jul 22 '14 at 00:00

answered Jul 21 '14 at 06:49

rink.attendant.6

36,468
57
89
143

1

Argh, why IE, why? D: – Jul 21 '14 at 06:54
Thanks for the answer. – Jul 21 '14 at 06:54
As all of us web developers know, IE is a bit slow to the game for a lot of things. On the bright side, quite a few cutting-edge features are [under consideration for the next version](https://status.modern.ie/). – rink.attendant.6 Jul 21 '14 at 06:55

score 3 · Answer 2 · answered Jul 21 '14 at 06:48

3

This should do the trick:

#container-fixed{
    pointer-events: none;
}

pointer-events: none; disables mouse interaction on the targeted element.
Please keep in mind that this CSS property is not supported by IE versions before 11.

answered Jul 21 '14 at 06:48

Cerbrus

60,471
15
115
132

score 1 · Answer 3 · answered Jul 21 '14 at 07:14

for IE10> browsers you have to calculate the position of the elements you want to be clicked through the higher level element and then do the thing you wanna do. e.g. http://jsfiddle.net/hm6Js/7/

topo=$('#container-content').offset().top;
left=$('#container-content').offset().left;
right=$('#container-content').offset().left+$('#container-content').width();
bottom=$('#container-content').offset().top+$('#container-content').height();
$(document).click(function(e){
    if(e.pageX>=left && e.pageX<=right && e.pageY>=topo && e.pageY<=bottom){
        alert("This doesn't work.");
    }
});

as you can see in this example the alert only fires when you click on the #container-content element.

NOTE:

it is not the most efficient way if there are lots of elements that you want to be clicked through.

score 0 · Answer 4 · edited May 23 '17 at 12:15

You can do this with pointer events with css. Change your css for #container-content to this

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

#container-fixed {
width:100%;
height:100%;
position:absolute;
top:0; left:0;
color:red;

    pointer-events: none /*the important thing*/
}

working fiddle here

a link to more information for pointer events can be found here This might not be cross browsers though so another dude suggests if this is an issue) to use javascript, to forward mouse events through layers. complete answer can be found here

score -3 · Answer 5 · answered Jul 21 '14 at 06:51

-3

you can do this by adding z-index

#container-content {
 width:100%;
 height:auto;
  z-index:999;
  position:absolute;
}

answered Jul 21 '14 at 06:51

Sudhanshu Saxena

1,154
12
30

Just setting the `z-index` doesn't allow to click through it. – Sebastian Zartner Jul 21 '14 at 07:30
tried on fiddle and it works – Sudhanshu Saxena Jul 21 '14 at 08:09
In the fiddle it works, but as described in the question `#container-fixed` is meant to be an overlay. Setting the `z-index` on `#container-content` places it above `#container-fixed`, so it's not an overlay anymore. – Sebastian Zartner Jul 21 '14 at 09:17

Click through an element, affecting what's behind it

5 Answers5