Googleマップを若干前のdivの位置に配置するにはどうすればよいですか？

Question

私はコンテンツを持つdivと、以前のdivの下にわずかに入るGoogleマップの下に置いておきたいと思います。 マップ上に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;