如何使用bootstrap堆疊div的圖層？

我要實現以下目標： layered div 如何使用bootstrap堆疊div的圖層？

行工作，但我不能把在正確的地方頂層的div（一個與類圖），它總是推一些行到旁邊。我如何使用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>

來源

2016-12-01 Yuri Waki

做ÿ你想要頂層div到整個屏幕的中心還是隻居中灰行？ –

像這樣的事情？

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

來源

2016-12-01 21:28:21

完全一樣，謝謝 –

如果你打算使用引導，你可以考慮使用模式http://getbootstrap.com/javascript/#static-example –

檢查了這一點：

如果您想獲得頂級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>

來源

2016-12-01 21:34:35

如何使用bootstrap堆疊div的圖層？

回答

相關問題