Bootstrap row over leaflet

Question

I'm trying to put over a leaflet map a bootstrap row, my html is:

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

span1 and span2 are columns with some information with rgba background. the leftover columns are a visible map area.

The problem is the map is showing over the columns and they are visible only when map is loading or zooming out.

span1 and span2 have z-index: 2000

How to I can put columns visible over the map?

Answer 1

You can put them in a common container, and absolutely position the row you want to overlay the map.

demo (with 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;
}

Clicking through an element is possible by specifying pointer-events: none. Note that this by default removes the ability to click children of said element (because the default pointer-events value is inherit), so declare pointer-events: initial on those elements you want to be able to interact with.

_{note: the reason the buttons are stacking on the fiddle is Bootstrap's media queries, are seeing the small preview as a mobile-phone size.}