Question

所以，我打算为我的网站制作一个重叠的东西，其中一个元素固定在网站上并放在一切之上。但这意味着元素背后的其他任何东西都不会受到影响。

这里有JSFiddle再现这个问题。

您会注意到您无法突出显示黑色文字，并且JavaScript事件无法触发。

以下是我用来创建此问题的CSS + HTML：

HTML

<div id="main-container">
    <div id="container-content">You can't highlight me! D:</div>
    <div id="container-fixed"><div style="margin:90px auto;background:red;width:40px;height:40px;"></div>You cannot highlight the text behind this DIV.  It also doesn't fire click events.</div>
</div>

main-container：这包含内容。

container-content：这是固定DIV背后的内容

container-fixed：这是DIV重叠＆＃34;容器内容＆＃34;

CSS

#main-container {
    width: 90%;
    margin: 5%;
    position: relative;
    height: 500px;
    overflow: auto;
}

#container-content {
    width: 100%;
    height: auto;
}

#container-fixed {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: red;
}

我努力实现的目标是什么？允许使用CSS和JavaScript（jQuery）答案。

Answer 1

使用CSS pointer-events：

除了指示该元素不是鼠标事件的目标之外，值none指示鼠标事件“穿过”该元素并将目标转移到该元素的“下面”。

#container-content {
    width:100%;
    height:auto;
    pointer-events: none;
}

如果您需要支持IE 10及更低版本，则需要polyfill。

Answer 2

这应该可以解决问题：

#container-fixed{
    pointer-events: none;
}

pointer-events: none;禁用目标元素上的鼠标互动请记住，11版之前的IE版本不支持此CSS属性。

Answer 3

对于IE10＆gt;在浏览器中，您必须计算要通过更高级别元素单击的元素的位置，然后执行您想要执行的操作。例如http://jsfiddle.net/hm6Js/7/

topo=$('#container-content').offset().top;
left=$('#container-content').offset().left;
right=$('#container-content').offset().left+$('#container-content').width();
bottom=$('#container-content').offset().top+$('#container-content').height();
$(document).click(function(e){
    if(e.pageX>=left && e.pageX<=right && e.pageY>=topo && e.pageY<=bottom){
        alert("This doesn't work.");
    }
});

正如您在此示例中所看到的，警报仅在您单击#container-content元素时触发。

注意：

如果您想要点击很多元素，那么这不是最有效的方式。

Answer 4

您可以使用css指针事件执行此操作。将#container-content的css更改为此

#container-content{
width:100%;
height:auto;
}

#container-fixed {
width:100%;
height:100%;
position:absolute;
top:0; left:0;
color:red;

    pointer-events: none /*the important thing*/
}

工作小提琴here

可以找到指向事件更多信息的链接here 这可能不是跨浏览器，所以另一个家伙建议如果这是一个问题）使用javascript，通过图层转发鼠标事件。完整答案可以找到here

Answer 5

您可以通过添加z-index

来完成此操作

#container-content {
 width:100%;
 height:auto;
  z-index:999;
  position:absolute;
}

点击一个元素，影响它背后的内容

5 个答案: