将点击传递到固定元素

Pass click through to fixed element

本文关键字：元素      更新时间：2023-09-26

我有一个静态元素位于固定元素之上。当上面的静态元素被点击时，我想把这个点击传递给固定元素。我该怎么做呢?下面是一个工作示例(我无法让它在JSFiddle中工作)。

<body>
    <div class="lower" onclick="lowerClick()"></div>
    <div class="upper" onclick="upperClick()"></div>
</body>
<script>
    function lowerClick() {
        alert("LOWER CLICK");
    };
    function upperClick() {
        alert("UPPER CLICK");
    };
</script>

//CSS file
.lower {
    height: 100px;
    width: 100%;
    z-index: -1;
    position: fixed;
    background-color:blue;
}
.upper {
    height: 50px;
    width: 100%;
    z-index: 1;
    position: static;
    background-color:red;
    pointer-events: none;
}

我认为将pointer-events:none添加到我的上部元素将使此工作，但是当我单击顶部元素时，什么也没有发生。

事实上，pointer-events:none可以正常工作。但是阻止你点击lower的是body元素。由于在lower上设置了z-index:-1，它将被发送到其父(即body)的后面。因此，您可以将body的z-index设置为更负的数字，当然postion应该是static以外的某个值(默认):

body {
  z-index:-1000;
  position:relative;
}
演示

可以使用下面的css来设置上面的div

.upper {
 pointer-events:none;
}

…还要避免负z-index，而是使用1表示下，2表示上。为什么把静态元素而不是绝对元素放在顶部?

相关文章：