绝对定位div可选文本/链接

Question

我有一个div位于页面的大块上,这导致div下面的内容不再可选/可点击.

有办法解决这个问题吗？即:使div没有任何可点击的功能吗？

#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

在叠加层上使用css属性"pointer-events":

#overlay {
   pointer-events: none;
}

请参阅:HTML"叠加",它允许点击进入后面的元素

Answer 2

如果你真的想让 div 覆盖下面的（可点击的）东西，没有什么好的方法。一种不体面的方法可能是在 mousedown 时隐藏元素并在 mouseup 时重新显示它：

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

但请注意，这会导致每次鼠标按下时都会发生回流，因此会影响性能。