Javascript 如何将插入框阴影添加到mapbox div？

我试图在Bootstrap3网站的mapbox div中添加一个插入框阴影。问题是当页面加载时阴影会出现1秒，然后消失在地图后面

你知道怎么把阴影推到前面吗

这是我的CSS：

#section1-wrapper {

    position:relative;
    height: 400px;  
}

#section1-container {

    background-color:black;
    background: rgba(0, 0, 0, 0.5);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);

    margin-top: 50px;

    color: #fff;
    height: 300px;
    position:relative;
    z-index: 1;
}

#map { 
    position: absolute;
    top:0;
    bottom:0;
    height: 100%;
    width:100%;
    z-index:0;

    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
}

<!-- Section1 -->

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

        <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">Ipsum Lorum. <br /><br /> Ipsum 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>

    <!-- Section1 End -->
    </div>

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

HTML：

#section1-wrapper {

    position:relative;
    height: 400px;  
}

#section1-container {

    background-color:black;
    background: rgba(0, 0, 0, 0.5);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);

    margin-top: 50px;

    color: #fff;
    height: 300px;
    position:relative;
    z-index: 1;
}

#map { 
    position: absolute;
    top:0;
    bottom:0;
    height: 100%;
    width:100%;
    z-index:0;

    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
}

<!-- Section1 -->

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

        <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">Ipsum Lorum. <br /><br /> Ipsum 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>

    <!-- Section1 End -->
    </div>

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

益母草

。




将阴影添加到<代码>：在<代码>伪元素或空div之前。对于简单的z索引，您还可以将贴图包装到其他div中

#map {
   position: relative;
   z-index: 0;
}

#map > .map-wrapper {
    position: relative;
    z-index: 5;
}

#map:before {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 10;
    pointer-events: none;

    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
}

这将使用
指针事件：无这意味着它在IE11以下无法工作。但实际上，没有办法在另一个元素之上添加一个元素，从而不会阻止单击事件。您可以将阴影拆分为四个不同的容器，并将它们放置在顶部、左侧、右侧和底部。但是阴影下的区域在没有指针事件的情况下仍然是不可点击的

您可以使用一个库来检查功能，然后只添加阴影。但是仅仅为此添加另一个库有点过分。
这不是最好的解决方案，但对我来说很有效

在地图中设置插入阴影的步骤

document.getElementById（'map'）.childNodes[0]。childNodes[0]。childNodes[2]。style.boxShadow='inset 0 150px#000000'

在所有浏览器中，google map API以上述方式生成map div
已经有一个类似的问题。通过VisioN和其他div元素查看答案。我已经看过了建议的解决方案：z-index变体、额外的映射容器和javascript类在我的例子中不幸不起作用。工作完美。谢谢。