How to put buttons on the leaflet map

Question

I am using leaflet map in my application & using bootstrap for responsiveness. I have some buttons bellow that map. It looks something like this.

But I want to overlap buttons on map like this

Here is my HTML

        <div class="span9" style="height:100%">
        <div id="map"></div>
        <div style="padding-left: 10px;padding-right: 10px">
            <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" /> 
            <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
            <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
        </div>
    </div>

My css for map

html, body, #map, .row-fluid{
 height: 100%;
 }

 #map {
width: 100%;
}


.btnStyle {
background-color: #4D90FE; 
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED); 
border: 1px solid #3079ED; 
color: #FFFFFF;
 padding: 4px;
 margin-top: 4px;
 margin-bottom: 4px;
 width:100%
}

.lblStyle {
color: red;
 padding: 4px;
 margin-top: 4px;
 margin-bottom: 4px;
width: 100%;
font-weight: bold;
}

Answer 1

Leaflet.js provides the following classes:

leaflet-bottom
leaflet-top
leaflet-left
leaflet-right

Generic HTML example:

    <div id="divmap"> <!--leaflet map wrapper div -->
        <div id="map" > <!--leaflet map div -->
            <div class="leaflet-bottom leaflet-left">
                <div id="marker-legend">  <!-- here the legend -->
                </div>
            </div>          
        </div>
    </div>

Adapting the previous HTML to your particular question:

 <div class="span9" style="height:100%">
    <div id="map">
        <div class="leaflet-bottom leaflet-left">
            <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3 leaflet-control" /> 
            <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3 leaflet-control" />
            <span id="studentsCount" class="lblStyle span3 leaflet-control"> Ikke rutesat: </span>
        </div>
    </div>
</div>