how to stack layers of div using bootstrap? - html

Question

I want to achieve the following:
layered div
rows are working, but I can't put the top layer div (the one with the class map) in the right place, it always pushes some of the rows to the side. how can I achieve the desired result using bootstrap?
/* my css: (index.css) */
.container-full {
margin: 0 auto;
width: 90%;
margin-bottom: 100px;
}
.blue-row{
height: 200px;
background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
background-color: #e3e3e3;
}
.darkgrey-row{
height: 100px;
background-color: #bebebe;
}
.map{
height: 200px;
width: 200px;
position: relative;
z-index:9999;
background:red;
}
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas
</div>
<div class="row grey-row">
<div class="map"> <!-- top layer div -->
content
</div>
</div>
<div class="row darkgrey-row">asasas</div>

Answer 1

Something like this?
.container-full {
margin: 0 auto;
width: 90%;
margin-bottom: 100px;
position:relative;
}
.blue-row{
height: 200px;
background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
background-color: #e3e3e3;
}
.darkgrey-row{
height: 100px;
background-color: #bebebe;
}
.map{
height: 200px;
width: 200px;
position: absolute;
background:red;
top:50%;
left:50%;
z-index:9999;
transform:translate(-50%,-50%);
}
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas
</div>
<div class="row grey-row">
<div class="map"> <!-- top layer div -->
content
</div>
</div>
<div class="row darkgrey-row">asasas</div>

Answer 2

Check this out:
If you want that top level div stay where it is, you can make .map > position:absolute
.container-full {
margin: 0 auto;
width: 90%;
margin-bottom: 100px;
}
.blue-row{
height: 200px;
background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
background-color: #e3e3e3;
height:150px;
}
.darkgrey-row{
height: 100px;
background-color: #bebebe;
}
.map{
height: 200px;
width: 200px;
z-index:9999;
background:red;
left:-50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position:fixed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas
</div>
<div class="row grey-row">
<div class="map">
content
</div>
</div>
<div class="row darkgrey-row">asasas</div>
</div>