如何允许 boxshadow over iframe google 地图嵌入？

Question

所以我遇到了一些我无法弄清楚的问题。我有一个网站，在 google 地图嵌入 (iframe) 之前和之后都有一个 div。地图的底部显示下面 div 的阴影，但每当我负 z-index 和相对位置时，阴影就会出现，但功能不再在地图上工作......有没有办法让影子出现还有贴图功能？

所以简而言之，如果我有阴影显示，它会阻止所有地图功能无法使用（拖动/缩放等）。唯一的问题是顶部阴影，因为底部没有问题。如果我从地图中删除 z-index: -10，函数会恢复但阴影消失了...有什么提示吗？

代码示例：

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>

Answer 1

好吧，我很笨，自己想出来了...不得不添加位置：相对和 z-index: 10 到 #menu-divider 并将地图包裹在支架中。

编辑：添加高度以匹配地图到支架以删除底部的白色 space...

工作代码：

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

Answer 2

试试这个：

#layout {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  background-color: #000;
  box-shadow: 0px 0px 12px #000;
  height: 100px;
  z-index: 10;
}

main {
  flex: 1;
}

#map {
  border: none;
  min-height: 300px;
  height: calc(100vh - 200px);
  position: relative;
  width: 100%;
}

<div id="layout">
  <header></header>
  <main>
    <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>  
  </main>
  <footer></footer>
</div>

这里更好DEMO

如何允许 boxshadow over iframe google 地图嵌入？

How to allow boxshadow over iframe google map embed?

html

css

iframe

box-shadow