I'm facing an issue with a div that displays a map across all 12 columns of the grid, but with a height of only 50vh. When I try to add two more divs below it, they end up overlapping. The mapDiv has a 'z-index:0', while my navbar has 'z-index:1'. Can someone help me identify the mistake? I've already attempted adding z-index values to the other two divs with no success.
.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;
} <div class="container-fluid">
<div class="row">
<div class="col col-md-12 mapDiv" id="maps">
<div class="img-fluid map-res">
<script>
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!'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API&callback=initMap" async defer>
</script>
</div>
</div>
</div>
<div class="row">
<div class="col col-md-6 formDiv"></div>
<div class="col col-md-6 addressDiv"></div>
</div>
</div>