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

Question

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

现在的问题是固定的导航栏在 Chrome 中不再正常工作。尽管导航栏的通用 z 值为 1030，但链接无法悬停并且似乎在 MapBox 后面滚动。我已经尝试通过以下方式增加 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

如果您想在下方推送更多内容，您需要将所有内容都包含在一个 block 中。 map 位置绝对到它的容器，在这种情况下是 body 。通过给它一个包装 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/