css - position: absolute inside position: relative 导致内容重叠

Question

我有一个 main 元素，我已将其设置为 position: relative。这包含两个 div，然后我在其上应用 position: absolute。然后，这会导致夹在 main 元素中间的页眉和页脚相互碰撞。我怎样才能阻止它？

使用 float 并清除页脚似乎提供了我想要的两列布局。但我不确定这个解决方案有多“坚固”，以及在 IE6/7 上会发生什么。

codepen 上的代码.

Answer 1

main 中的所有元素都是绝对定位的，因此 main 的高度计算为零，因此标题的底部边缘紧挨着页脚。如果您向 main 添加高度，您将在页眉和页脚之间打开空间。

给定以下 HTML:

<header>Header</header>
<main>
  <div id="text">
    <p>Some text</p>
  </div>
  <div id="links">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
  </div>
</main>
<footer>
  <p>Footer</p>
</footer>

您可以使用 float 实现两列布局，如下面的 CSS 所示:

main {
position: relative;
height: auto;
overflow: auto;
border: 1px solid blue;
}

#text {
float: left;
width: 500px
}

#links {
float: left;
width: 400px;
}

您需要在 main 容器上设置 overflow: auto 以包含 float (相当于清除它们)。

此外，请确保 float 元素的宽度不要太宽，否则如果屏幕尺寸太窄，它们将换行到第二行。

参见 http://codepen.io/anon/pen/gGsjd 的演示

脚注:使用 overflow:auto 与 clear:both

我倾向于使用 overflow: auto 但在某些情况下需要 clear 属性。在某个时候，在 http://www.w3.org/TR/CSS2/visuren.html#block-formatting 阅读有关“ block 格式化上下文”的信息选择一种方法而不是另一种方法的原因有点微妙，选择取决于您试图实现的布局的细节、它如何以响应方式运行等等。