Javascript 单张上的引导行

我试图在一个引导行上放置一个传单地图，我的html是：

<div class="row-fluid some" id="map">
    <div class="span1"></div>
    <div class="span2"></div>
</div>

span1和span2是包含一些rgba背景信息的列。剩余列是一个可见的地图区域

问题是地图显示在列上，只有在地图加载或缩小时才可见

span1和span2具有

z-index:2000

---

如何在地图上放置可见列？

您可以将它们放在一个公共容器中，并绝对定位要覆盖地图的行

（附单张） 通过指定

指针事件：none

，可以单击元素。请注意，这在默认情况下会删除单击所述元素的子元素的功能（因为默认的

指针事件

值为

继承

），因此在您希望能够与之交互的元素上声明

指针事件：initial

---

注意：按钮堆叠在小提琴上的原因是Bootstrap的媒体查询，将小预览视为手机大小。

它可以工作，但有一个大问题：我们无法与地图交互。如果你试图在第二排流体中进行交互，它将不起作用。但是我们可以把地图拖到

。overlay

@papelucho，我在蓝色按钮上添加了一个z索引和一个点击处理程序。这对我有用，你是对的。但我的问题是：不可能在灰色区域拖动地图。那么，如何使用引导行并在没有列的区域中与地图交互？@papelucho，

指针事件将解决这个问题。我更新了答案，然后用小提琴演奏。
<div class="container-fluid">
    <div class="mapbox">
        <div class="row-fluid some" id="map">
            <img src="//placehold.it/600x400">
        </div>
        <div class="row-fluid overlay">
            <div class="span1">
                <button class="btn btn-primary">Button</button>
            </div>
            <div class="span2">
                <button class="btn">Button</button>
            </div>
        </div>
    </div>
</div>

.mapbox {
    position: relative;
}

.mapbox .overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 314159;
    pointer-events: none;
}

.mapbox .overlay .btn {
    pointer-events: initial;
}