bootstrap grid System overlapping using z-index

Question

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 div below that but I don't know why it is overlapping. I have a z-index:0 on the mapDiv and z-index:1 on my navbar. Can someone point out the mistake. I already tried adding the z-index to my other two divs still no luck.

     .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>

The problem is the position: absolute, you can make the parent container position: relative, or remove the position: absolute... — Dave Plug, Jan 23 '17 at 16:17
that worked. can you give some explanation and make it a answer? — Rehan, Jan 23 '17 at 16:19
Believer, `position`ing in `html` is part of those core concepts every single web-developer should understand, regardless of whether they are front-end, back-end or full-stack developers. That's the explanation. It's not complicated, but you should learn it thoroughly, not by asking people to write "explanations" on StackOverflow. Go read [the docs](https://www.w3.org/TR/css-position-3/). You will need it and it's very helpful to know it. — tao, Jan 23 '17 at 16:37

score 2 · Accepted Answer · answered Jan 23 '17 at 16:38

Absolute positioning an element means that the element is taken completely out of the normal flow of the page layout, so each element get positioned from the very top left corner of the page.

Positioning an element inside a relative container make it absolute to the parent.

So in your case, removing the position: absolute or create a parent container with position: relative, does the trick.

score 2 · Answer 2 · edited May 23 '17 at 10:29

2

.formDiv,
.addressDiv {
    position: relative;
}

A positioned absolute element finds top most position: relative element. If there is no position relative it will absolute a/c to document.

For details please follow links below.

Z-Index Relative or Absolute?

What No One Told You About Z-Index

edited May 23 '17 at 10:29

Community

1
1

answered Jan 23 '17 at 16:44

Aamir Shahzad

6,683
8
47
70

bootstrap grid System overlapping using z-index

2 Answers2