如何使用bootstrap堆叠div层？

Question

我想实现以下目标： layered div

行正在运行，但我不能将顶层div（带有类映射的div）放在正确的位置，它总是将一些行推到一边。如何使用bootstrap实现所需的结果？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;