부트 스트랩을 사용하여 div의 레이어를 스택하는 방법은 무엇입니까?

Question

나는 다음과 달성하고자하는 : layered div

행이 노력하고 있습니다,하지만 바로 이곳에서 상위 계층 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; 
 
    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

확인이 아웃 :

당신은이 최상위 사업부의 숙박, 당신은 .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>