Wie positioniert man Google map leicht unter dem vorherigen div?

Question

Ich möchte ein div mit Inhalt und unter einer Google-Karte haben, die leicht unter dem vorherigen div geht. Das funktioniert gut, wenn ich z-index: -1 auf der Karte, aber in diesem Fall alle Tasten (wie Zoom in/out-Symbole) funktionieren nicht mehr, und die Einstellung z-index: 99999 auf div tut nichts. Was kann ich tun, um das zu lösen?

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

einfach unten Zeilen in Ihrer .container Klasse hinzufügen und sollte es in Ordnung

position:relative; 
margin-bottom:10px;