javascript - 传单上的 Bootstrap 行

Question

我正在尝试在传单 map 上放置一个 Bootstrap 行，我的 html 是:

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

span1 和 span2 是带有 rgba 背景的一些信息的列。剩余的列是可见的 map 区域。

问题是 map 显示在列上方，它们仅在 map 加载或缩小时可见。

span1 和 span2 有 z-index: 2000

如何让列在 map 上可见？

Answer 1

您可以将它们放在一个公共(public)容器中，并绝对定位要覆盖 map 的行。

demo (附传单)

<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 在您希望能够与之交互的那些元素上。

_{注意:按钮堆叠在 fiddle 上的原因是 Bootstrap 的媒体查询，将小预览视为手机尺寸。}