Absolutely positioned div over selectable text / links

Question

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: 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

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

Answer 2

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.