title: bootstrap grid System overlapping using z-index
body: <p>I have a div which shows a map and which spans all the 12 column but the height is 50vh. I am trying to add two more <code>div</code> below that but I don't know why it is overlapping. I have a <code>z-index:0</code> on the mapDiv and <code>z-index:1</code> on my navbar. Can someone point out the mistake. I already tried adding the z-index to my other two divs still no luck.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>     .mapDiv {
          position: absolute;
          z-index: 0;
          background-color: black;
          height: 50vh;
          width: 100%;
      }
      
      .formDiv {
          z-index: 0;
          background-color: black;
          height: 50vh;
      }
      
      .addressDiv {
          z-index: 0;
          background-color: crimson;
          height: 50vh;
      }
      .navbar
      {
         z-index:1;
         position:absolute;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col col-md-12 mapDiv" id="maps"&gt;
              &lt;div class="img-fluid map-res"&gt;
                  &lt;script&gt;
                      var map;
  
                      function initMap() {
                          var myLatLng = {
                              lat: 0
                              , lng: 0
                          };
                          var map = new google.maps.Map(document.getElementById('maps'), {
                              zoom: 16
                              , center: myLatLng
                              , mapTypeControl: true
                              , mapTypeControlOptions: {
                                  style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                                  , position: google.maps.ControlPosition.TOP_RIGHT
                              }
                          , });
                          var marker = new google.maps.Marker({
                              position: myLatLng
                              , map: map
                              , title: 'title!'
                          });
                      }
                  &lt;/script&gt;
                  &lt;script src="https://maps.googleapis.com/maps/api/js?key=API&amp;callback=initMap" async defer&gt;
                  &lt;/script&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col col-md-6  formDiv"&gt;&lt;/div&gt;
          &lt;div class="col col-md-6   addressDiv"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
   </code></pre>
  </div>
  </div>
  </p>