1

我是 CSS 新手，所以这个问题可能很简单。我正在布置一个网站，并且被定位所困。

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

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

现在，我只是希望内容 div 立即跟随在下面，并且不知道该怎么做。

position: relative; 
top: 0;

似乎不起作用（我最初期望的）。两个 div 处于相同的逻辑级别，并包裹在中间部分 div 内。我可能错过了一些非常明显和容易的东西。

4

3 回答 3

4

如果你有类似的东西

<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/

于 2013-03-19T11:24:41.600 回答
1

你#header的绝对定位有什么理由吗？删除那种风格，我想你会发现<div>s 会按照你的期望堆叠。

给出<div>绝对定位会将其从页面流中取出，因此仍在流中的元素“不认为”它在那里，因此它们不会堆叠在一起。

说这是你的标记：

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

如果您要绝对定位这些元素，您需要使用left、top和right/或bottom样式来排列它们。IE：

#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
}

但

将所有这些相对定位（或将它们保留为默认的静态）无论如何都会以您想要的方式堆叠它们 - 它们甚至会为您拉伸页面的宽度。

希望这可以帮助。

于 2013-03-19T11:30:26.153 回答
0

有什么理由使用绝对位置的标题 div 吗？您可以使用两个 div 的相对位置来排列在彼此下方。

于 2013-03-19T11:23:14.097 回答