html - 如何防止 Div 重叠

Question

我希望容器 2 始终位于容器 1 下方，但位于“背景”div 之外。我可以在宽屏幕上执行此操作，但当屏幕变窄时。 container2 漂浮在 container1 之上。如何将 container2 保留在下方？

css container1 和 container2 都具有来自 Twitter Bootstrap “容器”类的 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 中，并应用 position:relative

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