Yuri Waki Yuri Waki - 1 day ago 5
CSS Question

how to stack layers of div using bootstrap?

i want to achieve the following:
layered div

my html: (index.html)

<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>


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;
}


the 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?

Answer

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>

Comments