How to allow boxshadow over iframe google map embed?

So I am having a bit of a issue that I just cannot figure out. I have a website that has a div before and after a google map Embed (iframe). The bottom portion of the map shows the shadow of the below div but whenever I negative z-index and position relative the shadow shows up but the functions no longer work on the map... Is there a way to have the shadow show up and still have function of the map?

So in short if I have the shadow show up it stops all map functions from being unusable (drag / zoom / etc.). The only issue is the top shadow as the bottom shows up with no issue. If I remove the z-index: -10 from the map the functions come back but the shadow is gone... Any tips?

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>

Solution

Ok I'm stupid and figured it out myself... Had to add position: relative and z-index: 10 to #menu-divider and wrap the map in a holder.

EDIT: Add height to match map to holder to remove white space at bottom...

Working code:

#menu-divider {
	position: relative;
	z-index: 10;
    width: 100%;
    height: 100px;
    background-color: #000;
	box-shadow: 0px 0px 12px #000;
}

#map-holder {
	position: relative;
    height:300px;
}

#map {
	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>

<div id="map-holder"><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></div>

<footer></footer>

</body>
</html>