Absolutely positioned div over selectable text / links

I have a div that is positioned over a large chunk of the page, this causes the content underneath the div to no longer be selectable / clickable.

Is there a way to remedy this? ie: make a div not have any clickable functionality to it?

#page {
    width: 开发者_C百科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;
}

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

#overlay {
   pointer-events: none;
}

see: HTML “overlay” which allows clicks to fall through to elements behind it

If you really want the div to overlay the (clickable) stuff below, there is no decent way. An undecent way could be to hide the element on mousedown and reshow 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 this is causing a reflow with every mousedown so will hit performance.

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

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

There is/was a cheat method to do this were you put the overlay in a container div, set to:

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

Which subsequently causes it to have no hit area, but still be visible. However I don't know if this is cross-browser safe and may in fact be the result of a bug.