Question

我是CSS的新手，所以这个问题可能很简单。我正在建立一个网站，并坚持定位。

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

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

现在，我只是希望内容div立即跟在下面，并且无法弄清楚如何做到这一点。

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
}

<强> BUT

相对地定位所有这些（或者将它们保留为默认值，静态）会将它们按照你想要的方式堆叠 - 它们甚至会为你拉伸页面的宽度。

希望这有帮助。

Answer 3

有没有理由使用你的标题div与绝对位置？你可以使用两个div的相对位置来安排在彼此之下。

在CSS中排列和定位两个div彼此之下

3 个答案: