twitter-bootstrap - 如何使用 Bootstrap 网格系统覆盖 map

Question

我正在尝试在全屏谷歌地图网页上叠加多个面板。我想使用 mdl 网格系统来保持设计简单快捷。

这是我的html(有一些伪代码):

<div #map>
  <map></map>
</div>
<div class="overlay">
  <div class="row">
     <div class="col-md-3 col-md-offset-9">
         <div class="map-panel"></div>
     </div>
  </div>
</div>

我的 CSS:

#map{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
.overlay{
  margin-top: 10%;
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
}

这解决了我对响应式网站和简单性的需求。但是，我无法滚动 map 或与 map 交互(网格系统覆盖 map 并屏蔽了点击它的能力)

map 面板占据了大约 25% 的屏幕，所以我将有足够的空间与谷歌地图进行交互，我有几个元素，例如 map 面板。

我也试过:

#map{ 
 position:absolute; 
 top:0; 
 left:0; 
 z-index:1; 
} 
.overlay{ 
   margin-top: 10%; 
   position: relative; 
   z-index: 0;
   height: 100%;
   width: 100%;
}

.map-panel{
    z-index: 3;
}

但是我的面板在 map 下方消失了。

我怎样才能在谷歌地图上覆盖一个通用的网格系统并仍然保持与谷歌地图交互的能力？

Answer 1

如果没有代码进行测试，就很难给您一个明确的答案 - 但您缺少的基本概念是 HTML。

你想定位一个外部父/包装，它是 relative position 到 absolute position map 和叠加层。

HTML

<div class="outer-wrap">
    <map></map>
    <div class="overlay">
        <div class="row">
            <div class="col-md-3 col-md-offset-9">
                <div class="map-panel"></div>
            </div>
        </div>
    </div>
</div>

CSS

.outer-wrap {
    /* Must have some sort of height and width so that
    inner children (map and overlay) can position 
    themselves to it */
    height: 500px;
    width: 500px;
    position: relative;
}
map, div.overlay {
    /* This stretches the these elements to the edges of 
    the closest element upwards in the DOM with a relative 
    positioning (in this case it's the .outer-wrap) */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

map {
    /* needs to be lower than the overlay */
    z-index: 1;
}
div.overlay {
    z-index: 2; /* Needs to be higher than the map */
    opacity: .8; /* Just to keep the map is visible */
}

希望这能让您朝着正确的方向前进，祝您编码愉快! :)