I seem to be having a bit of trouble that I just can't resolve. On my website, there is a div before and after a google map Embed (iframe). The shadow of the bottom div appears on the map's bottom section, but when I use negative z-index and position relative, the shadow appears while the map functions stop working... Is there a way to show the shadow and still retain the functionality of the map?
In summary, displaying the shadow makes all map functions unavailable (drag / zoom / etc.). The issue only pertains to the top shadow, as the bottom one shows up without any problems. Removing the z-index: -10 from the map brings back the functions but removes the shadow... Any suggestions?
Code example:
HTML
#menu-divider {
z-index: 1;
width: 100%;
height: 100px;
background-color: #000;
box-shadow: 0px 0px 12px #000;
}
#map {
position: relative;
z-index: -10;
width: 100%;
height: 300px;
border: none;
}
footer {
z-index: 1;
position: relative;
width: 100%;
background-color: #000;
height: 100px;
box-shadow: 0px 0px 12px #000;
}<!doctype html>
<html lang="en-us">
<head>
<title>example</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="menu-divider">
</div>
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11797.683090046503!2d-83.05766876093261!3d42.333551617017015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x883b2d31a25efc0f%3A0x114c7a5b16dfbdd4!2sDowntown%2C+Detroit%2C+MI!5e0!3m2!1sen!2sus!4v1534087083348" allowfullscreen></iframe>
<footer></footer>
</body>
</html>