如何防止 Div 重叠答案

【问题标题】：How to keep Divs from overlapping如何防止 Div 重叠
【发布时间】：2013-10-02 15:27:23
【问题描述】：

我希望容器 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;
 }

【问题讨论】：

他们都必须有display:block
@JoshC div 默认有display:block。
是container's position:relative?
@Coop 是的，但它们可能在未知的 CSS 中设置为 inline 或 inline-block。
HTML 可以按照您的意愿工作，它必须是您的 CSS、浮动或绝对定位中的其他内容。请参阅小提琴jsfiddle.net/pZQPc/1

标签： html css twitter-bootstrap

【解决方案1】：

如果您想在不同的屏幕上使用不同的布局，您应该使用媒体查询：

您可以在较小的屏幕上使用绝对定位将第二个容器拉到第一个容器上。您应该将它们都放在一个 div 中，并使用 position:relative 应用

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

【讨论】：

【解决方案2】：

我不知道它如何影响标记中的其他元素，但您可以尝试：

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

还要考虑 .container 被建议为引导网格中最外层的元素，因此您可以将背景设置为绝对背景（将其从流程中移除）或将其放在 container1 中。

【讨论】：