Question

我有一个显示地图的div，它横跨所有12列，但高度为50vh。我想在其下面添加两个div，但我不知道为什么它重叠。我在地图栏上有z-index:0，导航栏上有z-index:1。有人可以指出错误。我已经尝试将z-index添加到我的其他两个div仍然没有运气。

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

Answer 1

.formDiv,
.addressDiv {
    position: relative;
}

定位的绝对元素找到最顶层的position: relative元素。如果没有相对位置，它将绝对a / c来记录。

详情请点击以下链接。

Z-Index Relative or Absolute?

<强> What No One Told You About Z-Index

Answer 2

绝对定位元素意味着元素完全脱离页面布局的正常流程，因此每个元素都从页面的左上角定位。

将一个元素放在一个相对容器中，使它成为父元素的绝对值。

所以在你的情况下，删除position：absolute或创建一个位置为relative的父容器，就可以了。这就是诀窍。

bootstrap grid使用z-index重叠系统

2 个答案: