2016-12-01 2 views
0

Я хочу, чтобы достичь следующего: layered divКак складывать слои 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>

+0

сделать Y ou хотите, чтобы верхний слой div находился в центре всего экрана или только от серого до серого? –

ответ

0

Что-то вроде этого?

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

+0

точно так же, спасибо –

+0

, если вы планируете использовать бутстрап, вы можете рассмотреть возможность использования модального http://getbootstrap.com/javascript/#static-example –

0

Проверьте это:

Если вы хотите, чтобы верхний уровень ДИВ пребывания, где вы можете сделать .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>

Смежные вопросы