HTML

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

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

地图面板占据屏幕的25％左右，因此我有足够的空间与谷歌地图互动，我有几个元素，如地图面板。

我也尝试过：

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

但我的面板消失在地图下方。

如何在Google地图上叠加常见的网格系统并仍然能够与Google地图进行互动？

Answer 1

如果没有代码来测试就很难给你一个确定的答案 - 但你缺少的基本概念是HTML。

您希望将relative position的外部父/包裹放置到地图的absolute position和叠加层。

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 */
}

希望这能为您提供正确的方向，快乐的编码！：）

如何使用覆盖地图的自举网格系统

1 个答案:

HTML

CSS