Html 如何在 Google 地图上浮动 div?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6037712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:38:51  来源:igfitidea点击:

How to float a div over Google Maps?

htmlcssgoogle-maps

提问by Adham

I have a divthat displays a Google map.

我有一个div显示谷歌地图的。

How do I make another divfloat over the map div?

如何让另一个div浮动在地图上div

回答by Dan

Try this:

尝试这个:

<style>
   #wrapper { position: relative; }
   #over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
</style>

<div id="wrapper">
   <div id="google_map">

   </div>

   <div id="over_map">

   </div>
</div>

回答by Matheus

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

Just need to move the map below this box. Work to me.

只需将地图移动到此框下方即可。为我工作。

From Google

来自谷歌

回答by Adrian Rodriguez

Just set the position of the div and you may have to set the z-index.

只需设置 div 的位置,您可能需要设置 z-index。

ex.

前任。

div#map-div {
    position: absolute;
    left: 10px;
    top: 10px;
}
div#cover-div {
    position:absolute;
    left:10px;
    top: 10px;
    z-index:3;
}

回答by atnmachine

absolute positioning is evil... this solution doesn't take into account window size. If you resize the browser window, your div will be out of place!

绝对定位是邪恶的......这个解决方案没有考虑窗口大小。如果您调整浏览器窗口的大小,您的 div 将不合适!