Bootstrap line above the sheet

Question

I am trying to overlay a booklet map on the bootstrap line, my html:

<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 an rgba background. the remaining columns are the visible display area.

The problem is that the map is displayed above the columns, and they are only visible when loading or scaling the map.

span1 and span2 have z-index: 2000

How can I put columns on a map?

Answer 1

You can put them in a common container and completely put the line that you want to overlay on the map.

demo (with sheet)

 <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 on an element is possible by specifying pointer-events: none . Note: this by default removes the ability to click children of the specified element (since the default value of pointer-events is inherit by default), so declare pointer-events: initial for those elements with which you want to interact.

_{note: the reason the buttons overlap the fiddle is because Bootstrap download requests see a small preview as the size of a mobile phone.}