html - 如何使用 Bootstrap 堆叠 div 层？

Question

我想实现以下目标: layered 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>

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>