指针事件：无 - 尝试点击PNG下方的iframe

Question

我正在尝试将“pointer-events：none”设置为半透明PNG，以便能够导航放置在该PNG下方的iframe（它是Google Map）。我尝试将“pointer-events：auto”提供给iframe，并将“pointer-events：none”提供给父div，但没有一个允许点击。

有关信息，iframe绝对定位，而png和父div都是相对的。

HTML很简单：

<div class="wrapper">

<iframe class="map" src="https://www.google.com/maps/d/embed?mid=zZ48oPOpCSZo.khyS2koft-Ss"></iframe>

<img src="http://thehermitcrab.org/wp-content/uploads/manual-uploads/the-story/hey-there-bottom-1366.png"/>

</div>

这是css：

.wrapper {
    position: relative;
}

.wrapper img {
    pointer-events: none;
    display: block;
    position: relative;
}

.map {
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

}

这是网站：

www.thehermitcrab.org （向下滚动一点点，你会看到地图）

提前非常感谢你！

Answer 1

iframe的z-index为-1，这似乎会导致它忽略鼠标事件，尽管pointer-events设置。将其更改为至少0，并让图片的z-index更大。