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

我正在尝试将MapBox.js合并到Bootstrap3网站中。其思想是使用地图作为一行的背景，该行使用网站的整个宽度，并在其顶部显示html内容。为了将MapBox.js推到后面，我给它指定了一个z值-1

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

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

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>

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>

var map=L.mapbox.map（'map'，'examples.map-9ijuk24y'{
滚轮缩放：错误，
zoomControl:false}）
.setView（[40，-74.50]，9）；

首先删除给定给div的两个ID，ID必须唯一

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

---

选中此项

如果要在下面推送更多内容，只需在块中包含所有内容即可。贴图位置与其容器（在本例中为主体）绝对相关。通过给它一个包装器div来包含它，您可以继续在页面中添加更多内容

我已经更新了@anpsmn的JSFIDLE:

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

...
...

---

不幸的是，这并没有达到预期效果。地图需要包含在行容器中，因为上面和下面还有其他部分，即地图不应该是顶部：0和底部：0。使用z值，我在Chrome中遇到了固定导航栏（z-index:1030）的问题，当滚动和导航栏悬停不起作用时，这个问题部分消失了。

#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
}

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