在CSS中排列和定位两个div

Question

我是CSS新手，所以这个问题可能非常简单。我正在设计一个网站，却被定位问题卡住了。

在这个网站上，我有一个中间部分，其中有一个标题，下面有一些可滚动的内容。下面是标题div:

的相关CSS

#header {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}

现在，我只想让contentdiv立即跟随在下面，但不知道如何做到这一点。

position: relative; 
top: 0; 

似乎不起作用(这是我最初期望的)。两个div都在相同的逻辑层次上，并在中间部分div中包装。我可能错过了一些非常明显和容易的东西。

Answer 1

如果你有像

<header>header</header>
<main>main content</main>

使用如下css:

header, main
{
    display: block; /* because <main/> is very new */
    padding: 20px;
    background: #eeeeee;
}
header
{
    background: blue;
}

就是这样，因为块元素在默认情况下位于彼此的下方。

http://jsfiddle.net/86wX4/

Answer 2

您的#header绝对定位的原因是什么?去掉那个样式，我想你会发现<div>会像你期望的那样堆叠。

给<div>一个绝对的定位将它带出页面的流程，所以仍然在流程中的元素，'不认为'它在那里，因此，它们不会堆叠在彼此的顶部。

说这是你的标记:

<div id="header">Header</div>
<div id="content">Content</div>

如果你要绝对定位这些元素，你会想要使用left, top, right和/或bottom样式来安排它们。即:

#header{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 50px;
}
#content{
    position:absolute;
    width:100%;
    top:50px; //Because the header is 50px high
}

将所有这些相对地放置(或者让它们保持默认的静态)将按照你想要的方式堆叠它们-它们甚至会为你拉伸页面的宽度。

Answer 3

是否有任何理由使用绝对位置的标题div ?