Click an element, influencing what's behind

Question

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

Here's a JSFiddle reproducing this issue.

You will notice that you cannot select black text, and the JavaScript event does not fire.

---

Here is the CSS + HTML that I 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 contains the content.

container-content : this content is behind a fixed div

container-fixed : This DIV overlaps the contents of the container

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; } 

---

Am I trying to achieve what I am trying to achieve? Both CSS and JavaScript (jQuery) responses are allowed.

Answer 1

Use CSS pointer-events :

In addition to indicating that the element is not a mouse event object, a value of none indicates that the mouse event goes “through” the element, and the target object “is below it”.

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

If you need support for IE 10 and below, polyfill .

Answer 2

This should do the trick:

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

pointer-events: none; disables mouse interaction with the target element.
Keep in mind that this CSS property is not supported by versions of IE prior to 11.

Answer 3

for IE10 browsers> you need to calculate the position of the elements that you want to click through a higher level element and then do what you want to 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 warning only fires when you click on the #container-content element.

Note:

this is not the most efficient way if there are many elements that you want to click on.

Answer 4

You can do this with pointers using css. Change your css to #container-content to

 #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 script here

a link to more information for pointer events can be found here. These may not be cross-browsers, although another dude suggests if this is a problem) use javascript to send mouse events through layers. full answer can be found here

Answer 5

you can do this by adding z-index

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