在可选文本/链接上绝对定位的 div答案

【问题标题】：Absolutely positioned div over selectable text / links在可选文本/链接上绝对定位的 div
【发布时间】：2012-04-16 03:10:21
【问题描述】：

我有一个 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;
}

【问题讨论】：

是的，看来不可能，不过谢谢！
有可能，我会在几分钟内写一个答案。
我想的技术需要javascript，可以接受吗？
我想这样做，但我想“这肯定是不可能的，但我至少会谷歌它......”。很高兴我错了！

标签： html css css-position

【解决方案1】：

在叠加层上使用 css 属性“pointer-events”：

#overlay {
   pointer-events: none;
}

见：HTML “overlay” which allows clicks to fall through to elements behind it

【讨论】：

正如链接版本中的 cmets 所提到的，这是一个非常好的解决方案，但您必须小心，因为并非所有浏览器都支持它。
太棒了！超级干净的解决方案！

【解决方案2】：

如果您真的希望 div 覆盖下面的（可点击）内容，那么没有像样的方法。一种不体面的方法可能是在 mousedown 上隐藏元素并在mouseup 上重新显示它：

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

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

【讨论】：

这可以防止鼠标光标在悬停在链接上时变为手形，并防止在悬停时链接被下划线。 pointer-events 答案是正确的答案，只要您不需要支持任何早于 IE11 的东西。

【解决方案3】：

您可以使用 css z-index 属性使可点击对象与此蒙版重叠。在这里看看它是如何工作的：

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

【讨论】：

但这不是违背了将东西放在顶部的目的吗？
是的，我几乎需要所有内容来执行此操作，然后将完全隐藏 div
取决于.. 例如，您可以将 z-index 添加到链接以及您希望位于顶部的链接，也许您可以发布相关的 html 以获得更好的想法

【解决方案4】：

如果您将叠加层放在容器 div 中，则存在/曾经有一种作弊方法，设置为：

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

这随后导致它没有命中区域，但仍然可见。但是我不知道这是否是跨浏览器安全的，实际上可能是错误的结果。

【讨论】：