在CSS中排列和定位两个div，使其相互低于对方

我是CSS新手，所以这个问题可能非常简单。我正在布置一个网站，并坚持与定位

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

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

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

position: relative; 
top: 0; 

---

似乎不起作用（我最初希望如此）。两个div都在同一逻辑级别上，并被包装在中间部分div中。我可能遗漏了一些非常明显和简单的内容。

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

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

如果您有

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

标题
主要内容

使用此css：

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

header
{
    background: blue;
}

header，main
{
display:block；/*因为非常新*/
填充：20px；
背景：#eeeeee；
}
标题
{
背景：蓝色；
}

仅此而已，因为默认情况下块元素彼此位于下方

---

如果您有

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

标题
主要内容

使用此css：

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

header
{
    background: blue;
}

header，main
{
display:block；/*因为非常新*/
填充：20px；
背景：#eeeeee；
}
标题
{
背景：蓝色；
}

仅此而已，因为默认情况下块元素彼此位于下方

---

您的

#标题

绝对定位有什么原因吗？删除该样式，我想您会发现

将按照您的期望堆叠

给

一个绝对定位会使它脱离页面的流程，因此仍然在流程中的元素“不认为”它在那里，因此它们不会堆叠在彼此之上

假设这是您的标记：

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

但是

将所有这些相对定位（或将它们保留在默认的静态位置）将按照您的需要堆叠它们——它们甚至会为您扩展页面的宽度

---

希望这能有所帮助。

您的

#标题是否绝对定位？删除该样式，我想您会发现
将按照您的期望堆叠

给
一个绝对定位会使它脱离页面的流程，因此仍然在流程中的元素“不认为”它在那里，因此它们不会堆叠在彼此之上

假设这是您的标记：

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

但是

将所有这些相对定位（或将它们保留在默认的静态位置）将按照您的需要堆叠它们——它们甚至会为您扩展页面的宽度

希望这能有所帮助。
您的
#标题
绝对定位有什么原因吗？删除该样式，我想您会发现
将按照您的期望堆叠。有关使用哪种定位样式的提示，请参阅。谢谢F4r-20，这非常有效。谢谢大家的提示。主要是，我想我需要理解相对定位的关键原则。有什么理由你的
#标题
是绝对定位的吗？删除该样式，我想您会发现
将按照您的期望堆叠。有关使用哪种定位样式的提示，请参阅。谢谢F4r-20，这非常有效。谢谢大家的提示。主要是，我认为我需要理解相对定位的关键原则。