在 CSS 中排列和定位两个 div答案

【问题标题】：Arranging and positioning two divs below each other in CSS在 CSS 中排列和定位两个 div
【发布时间】：2013-03-08 01:00:53
【问题描述】：

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

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

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

现在，我只想让内容 div 紧跟在下面，但不知道该怎么做。

position: relative; 
top: 0;

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

【问题讨论】：

您的#header 绝对定位有什么理由吗？删除该样式，我想您会发现 <div>s 会按照您的预期堆叠。
请参阅stackoverflow.com/questions/186044/… 以获取有关使用哪种定位样式的提示。
感谢 F4r-20，这非常有效。谢谢大家的提示。主要是，我想我需要了解关于相对定位的关键原则。

标签： css html position positioning

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果你有类似的东西

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

【讨论】：

【解决方案3】：

你的#header 有什么绝对定位的原因吗？删除该样式，我想您会发现 <div>s 会按照您的预期堆叠。

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

说这是你的标记：

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

但是

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

希望这会有所帮助。

【讨论】：