引导网格系统重叠使用 z-index答案

【问题标题】：bootstrap grid System overlapping using z-index引导网格系统重叠使用 z-index
【发布时间】：2017-01-23 16:12:18
【问题描述】：

我有一个显示地图的 div，它跨越所有 12 列，但高度为 50vh。我正在尝试在其下方再添加两个div，但我不知道它为什么会重叠。我在 mapDiv 上有一个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>

【问题讨论】：

问题是position:absolute，可以让父容器position:relative，或者去掉position:absolute...
那行得通。你能给出一些解释并给出答案吗？
信徒，positioning in html 是每个 Web 开发人员都应该理解的核心概念的一部分，无论他们是前端、后端还是全栈开发人员。这就是解释。它并不复杂，但你应该彻底学习它，而不是要求人们在 StackOverflow 上写“解释”。去阅读the docs。你会需要它，知道它会很有帮助。
好的芽:) @AndreiGheorghiu

标签： jquery html css twitter-bootstrap

【解决方案1】：

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

将元素定位在相对容器内使其成为父级的绝对元素。

因此，在您的情况下，删除 position: absolute 或创建一个具有 position: relative 的父容器就可以了。

【讨论】：

【解决方案2】：

.formDiv,
.addressDiv {
    position: relative;
}

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

详情请点击以下链接。

Z-Index Relative or Absolute?

What No One Told You About Z-Index

【讨论】：