在传单的Bootstrap行

Question

我正试图将传单地图放在一个自举行上,我的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

如何在地图上显示列？

Answer 1

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

演示(使用Leaflet)

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

通过指定可以单击元素pointer-events: none.请注意,默认情况下,这会删除单击所述元素的子元素的功能(因为默认pointer-events值为inherit),因此请声明pointer-events: initial您希望能够与之交互的元素.

_{注意:按钮堆叠在小提琴上的原因是Bootstrap的媒体查询,将小预览视为手机大小.}