如何将谷歌地图略微置于以前的div之下？

Question

我想要一个包含内容的div，并且在谷歌地图下方稍微位于前一个div之下。 如果我在地图上设置z-index: -1，这很有用，但在这种情况下，所有按钮（如放大/缩小图标）都不再起作用，并且在div上设置z-index: 99999并不行任何东西。 我该怎么做才能解决这个问题？

https://codepen.io/anon/pen/MOBbVB

HTML

<div class="container">
    <div class="article">
        <h1>Title</h1>
        <p>Lorem Ipsum</p
    </div>
</div>

<div id="map-canvas"></div>

CSS

.container {
  width: 768px;
  margin: auto;
  z-index: 9999999; /* This doesn't make it go over map? */
}


#map-canvas {
  height: 400px;
  position: relative;
  margin-top: -50px;
  /* z-index: -1; This works but disables buttons */
}

Answer 1

只需在.container课程中添加以下行，就可以了。

position:relative;
margin-bottom:10px;