如何使用 mapbox.js 作为背景，以便 html 内容和导航栏保持在顶部可见？

Question

我正在尝试将 MapBox.js 合并到 Bootstrap 3 网站中。这个想法是使用地图作为使用网站整个宽度的行的背景，并在其上显示 html 内容。为了将 MapBox.js 推到后面，我为其分配了一个 z 值 -1。

现在的问题是固定的导航栏在 Chrome 中不再正常工作。链接无法悬停并且似乎在 MapBox 后面滚动，尽管导航栏的通用 z 值为 1030。我已经尝试通过以下方式增加 z 值，但没有任何效果：。

navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 999999;
}

mapbox-css 可以在这里找到：http://api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.css

知道如何解决这个问题吗？

这是我的代码：

HTML

<div class="row"> Other Section</div>


<!-- Map Start -->
<div class="row" >    
    <div  id="map"></div>

    <div class="container" id="section1-container">

        <div class="col-xs-12 col-sm-12 col-md-12">

            <br />
            <br />

            <h1 class="text-center">Ipusm Lorum.</h1>

            <br />
            <br />

        </div>

        <div class="row text-center">

            <div class="col-xs-12 col-md-4">
                <address>
                    <strong><abbr title="Telefono">T:</abbr> 777777777</strong
                </address>
            </div>
            <div class="col-xs-12 col-md-4">
                <address>
                    <strong><abbr title="Mail">M:</abbr> <a href="mailto:#">info@eample.com</a></strong
                </address>
            </div>
            <div class="col-xs-12 col-md-4">
            <address>
                    <strong><abbr title="Dirrecion">D:</abbr> any street</strong
                </address>
            </div>


            <br />
            <br />
            <br />
            <br />


        </div>


    </div>

<!-- Map End -->
</div>

其他部分

CSS

#section1-container {

    position:relative;
    z-index: 1;
}

#map { 
    position:absolute;
    width:100%;
    z-index: -1;
    height: 500px;
}

JavaScript

<script src="//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js"></script>

     <script>
        var map = L.mapbox.map('map', 'examples.map-9ijuk24y', {
        scrollWheelZoom: false,
        zoomControl: false})
        .setView([40, -74.50], 9);

    </script>

Answer 1

如果您想在下面推送更多内容，您只需将所有内容都包含在一个块中。地图位置绝对是其容器，在本例中是主体。通过给它一个包装器 div 来包含它，您可以继续在页面下方显示更多内容。

我已经更新了@anpsmn 的 jsfiddle：

<div id="section1-wrapper" class="wrapper">
    <div id="map"></div>
    <div class="container">
        ...
    </div>
</div>
<div id="section2-wrapper" class="wrapper">
    ...
</div>

http://jsfiddle.net/h2wj7/1/

Answer 2

先去掉两个给div的id，id必须是唯一的。

<div  id="map" class="row" id="section1-wrapper"> 

为这两个部分提供 z-index 以使 #map 的值低于 #section-container

#map {
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    z-index: 0
}
#section1-container {
    background-color:black;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    position:relative;
    z-index: 1
}

查看demo