Question

我有一个静态元素，位于固定元素之上。单击上部静态元素时，我想将此单击传递给固定元素。我怎样才能做到这一点？这是一个工作示例（我无法在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添加到我的上层元素会使其工作，但是当我点击顶部元素时，没有任何反应。

Answer 1

事实上pointer-events:none预计会有效。但阻止您点击lower的是body元素。由于在z-index:-1上设置了lower，因此会将其发送到其父级（body）的后面。因此，您可以将z-index的{{1}}设置为更负数，当然body应该是postion以外的其他值（默认值）：

static

Demo

Answer 2

您可以使用以下css作为上部div

.upper {
 pointer-events:none;
}

...也避免负z-index，而是使用1代表lower，2代表upper代表。还有为什么把静态而非绝对元素放在顶部？

通过点击进入固定元素

2 个答案:

Demo