ブートストラップを使ってdivのレイヤーをスタックする方法は？

Question

私は次のことを達成したい： layered div

行が働いているが、私は正しい場所に最上層のdiv（クラスマップとの1）を置くことができない、それは常にに行の一部をプッシュサイド。どのように私はブートストラップを使用して希望の結果を達成することができますか？

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

このような何か？

.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

チェックこのアウト：

あなたはそれがあるというトップレベルのdiv滞在をしたい場合は、あなたが.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>