Absolutely positioned div above selectable text / links

Question

I have a div that fits on a large fragment of the page, this leads to the fact that the content under the div can no longer be selectable / clickable.

Is there any way to fix this? those. to make a div not accessible to it by functionality?

#page { width: 980px; padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; } #overlay { margin: 0px; padding: 0px; height: 536px; width: 422px; position: absolute; top: -4px; right: -20px; background-image: url(../images/overlay_full.png); background-repeat: no-repeat; background-position: left top; } 

Answer 1

If you really want the div to clickable the material below, there is no decent way. A non-detrimental way could be to hide an element on mousedown and view it onmouseup:

 document.body.addEventListener("mousedown", function() { getElementById("overlay").style = "display:none;" }); document.body.addEventListener("mouseup", function() { getElementById("overlay").style = "display:block;" }); 

However, be warned that this causes remelting with every piece, so that it will hit performance.

Answer 2

use the css attribute "event-pointer" on the overlay:

 #overlay { pointer-events: none; } 

see: HTML "overlay" which allows clicks to leak to elements located behind it

Answer 3

You can use the css z-index property to make interactive objects overlap this mask. See how it works here:

http://www.w3schools.com/css/pr_pos_z-index.asp

Answer 4

There is / was a cheat method for this, if you would impose an overlay in the div container set to:

 position:fixed; overflow:display; width:0px; height:0px; 

Which subsequently leads to the fact that he does not have a hit area, but will still be visible. However, I do not know how safe this is for a cross browser and may be the result of an error.