如何在谷歌地图上浮动一个 div？答案

【问题标题】：How to float a div over Google Maps?如何在谷歌地图上浮动一个 div？
【发布时间】：2011-05-17 22:04:55
【问题描述】：

我有一个显示 Google 地图的 div。

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

【问题讨论】：

div on top of div with Google Maps API的可能重复

【解决方案1】：

试试这个：

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

【讨论】：

是跨浏览器吗？ IE6？ 7 ?
不，这行不通，我需要将我的活动冒泡到 Google 地图。
这与事件冒泡无关，它只是基本的css。是的，它是跨浏览器的，绝对位置和相对位置是古老的。
如果我们使用引导列网格系统并且我们希望内容位于地图前面怎么办？例如，jsfiddle.net/y30am49b/1 ... 在这种情况下，将绝对位置添加到 container-fluid 或 col-xs-4 是否是正确的方法？
但是当你全屏时这不起作用。有什么解决方法吗？

【解决方案2】：

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

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

来自谷歌

【讨论】：

这是列表中唯一对我有用的。谢谢老兄

【解决方案3】：

只需设置 div 的位置，可能还需要设置 z-index。

例如

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

【讨论】：

【解决方案4】：

绝对定位是邪恶的......这个解决方案没有考虑窗口大小。如果你调整浏览器窗口的大小，你的 div 就会不合适！

【讨论】：

你说的是固定定位，不是绝对的。
如果你正确使用它，你需要确保你的绝对定位元素在一个相对定位元素内，否则你的绝对定位元素是相对于视口大小定位的。