Question

我试图模仿谷歌地图在全屏地图上叠加菜单的方式。要做到这一点，我使用gmaps4rails来创建地图，它完美地运行，但是我无法在顶部覆盖任何内容。内容位于页面源中但已隐藏。

以下是我如何设置它：

HTML

<div id="map">
  <div id="menu">
     Whatever
  </div>
</div>

SCSS

#map{
  min-height: 100%;
}

#menu{
  position: absolute;
  top: 100;
  left: 100;
}

Answer 1

Js Fiddle：http://jsfiddle.net/harshdand/f18df3vt/

使用类叠加

创建一个div

HTML

<div><iframe class="map" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7098.881909466284!2d78.04262706879058!3d27.173874421651977!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39747121d702ff6d%3A0xdd2ae4803f767dde!2sTaj+Mahal!5e0!3m2!1sen!2sin!4v1407609998088" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
<div class="overlay">
    <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>
</div>

CSS

.map{
    width:100%;
    height:100%;
}
.overlay{
    top:45px;
    margin:5px;
    z-index:1;
    position:absolute;
}
ul {
    background-color:white;
    list-style-type: none;
    margin: 0;
    padding: 5px;
}

div覆盖全屏地图

1 个答案: