如何防止Div重疊

Question

我希望容器2始終位於容器1的下方，但位於「背景」div之外。我可以用寬屏幕做到這一點，但當屏幕變窄時。 container2漂浮在container1的頂部。我如何將container2放在下面？

css container1和container2都有來自twitter的引導「容器」類的css值。我只是添加了1和2來幫助解釋我需要的東西。

<div class="Background"> 
    <div class="container1"> 
     <div class="row "> 
     <h1></h1> 
     </div> 
     <div class="row "> 
     <div> 
     </div> 
     </div>  
    </div> 
</div> 
<div class="container2"> 
</div> 

CSS

.Background{ 
height: 250px; 
color: #cccccc; 
} 
.container { 
padding-right: 15px; 
padding-left: 15px; 
margin-right: auto; 
margin-left: auto; 
} 

Answer 1

如果你想在不同的屏幕不同的佈局，你應該使用一個媒體查詢：

你可以在較小的屏幕上使用絕對定位在拉第二容器首先。你應該圍繞他們兩個與位置的div：相對適用

@media (max-width: 600px) { 
    .container2 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 

Answer 2

我不知道它如何影響在標記等元素，但你可以嘗試：

.Background,.container2{ 
    display :block // or inline-block with clearing floats 
} 

同時認爲，.container是建議自舉網格中最外層的元素，以便您可以將背景設置爲絕對（將其從流中取出）或放入container1中。