Search code examples
cssiframepngpointer-events

Pointer-events: none - trying to click on iframe beneath PNG

I'm trying to set "pointer-events: none" to a semi transparent PNG, in order to be able to navigate the iframe (it's a Google Map) placed beneath that PNG. I tried giving "pointer-events: auto" to the iframe, and also "pointer-events: none" to the parent div, yet none of it allows to click through.

For info, the iframe is absolutely positioned, whereas the png and parent div are both relative.

The HTML is dead simple:

<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>

and here's the 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;

}

and here's the website:

www.thehermitcrab.org (scroll down a tiny bit and you'll see the map)

Thank you so much in advance!

Solution

  • The iframe has an z-index of -1, which seems to cause it to ignore mouse events despite the pointer-events setting. Change it to at least 0 and let the image have a z-index that is bigger.