Question

因此，我遇到了一个我无法解决的问题。我有一个网站，该网站在Google Map Embed（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，然后将地图包装在支架中。

编辑：添加高度以将匹配的地图匹配到持有人以删除底部的空白...

工作代码：

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

如何在iframe Google Map上嵌入boxshadow？

2 个答案: