Css 为什么我的绝对定位div掩盖了我的相对定位div？

我的网站顶部有一个“ribbon”类型的标题：

#top-wrapper {
    border-bottom: 5px solid #A1C1BE;
    width: 100%;
    background-color: #59554E;
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 100px;
    padding: 10px 0 0 0;
    color: #C0C0A8;
}

绝对定位需要确保它占据用户浏览器的整个宽度（据我所知）。但是，我的网页的其余部分（包含我所有其他div的主体）隐藏在此功能区后面：

#pagebody {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

我能找到的唯一解决方案是在

顶部包装的末尾和
页面正文的开头之间添加一堆


有更好的方法吗？
绝对定位将元素从正常流程中移除。您不需要绝对定位来最大化宽度。您可以使用宽度：100%来完成此操作。
有很多方法可以做到这一点。首先，您可以将顶部包装放在pagebody元素之外，然后将其宽度定义为100%

如果您有一个图形是一个功能区，并且它应该与pagebody元素的顶部重叠-正如我想您在上面所说的-那么您可以使用position absolute和z-index将其放置在pagebody元素的上方。然后将适当的填充顶部添加到pagebody

你没有提供html，所以我们不知道你到底在干什么。
绝对定位元素（顶部包装器）总是位于相对元素（pagebody）的顶部，除非你使用z-index做了一些骇人听闻的事情（甚至是有限的）。您可能想做的是将pagebody元素向下移动，刚好经过顶部包装器。我不知道你的顶部包装有多高，因为它没有指定的高度。由于字体大小的差异，您可能不知道。但总的来说，您只需在pagebody标记中添加上边距或填充，如下所示：

margin-top:50px;

根据我在另一个答复中的评论：

您可以只使用宽度：100%
，但请确保删除它留下的默认间隙：

html, body {
    margin: 0;
    padding: 0;
}

你也应该看看necolas'。它包含了几乎每个站点都需要的所有基本CSS规则：）
Setting
width:100%在div和浏览器边缘之间留有一个小间隙。设置
边距：0；在
html
和
body
@MartinodF上填充：0
，这正是我所需要的。如果你能把它写进一个答案，我会接受的。@MaxMackie顺便说一句，你可能应该看看necolas之类的东西。它包含了几乎每个网站都需要的所有基本CSS规则：）@MaxMackie发布了答案。谢谢一把小提琴或你的html在这里会有所帮助。正如有人已经指出的那样，绝对定位
不应该是必需的，所以我的包装器或任何东西都没有问题？解决这个问题的唯一方法是，一旦我定义了包装纸的高度，就使用边距顶部进行黑客攻击？这不是黑客攻击。这是绝对位置的典型用法。我认为Hacky意味着position absolute一开始是一个奇怪的选择，任何为了满足您的需要而对其进行的修改都是一种Hacky，因为您所需要做的就是删除position声明，以及top和left，并将整个元素放置在DOM中的适当位置，并应用100%的宽度。“Hacky”用于专门描述z-index的使用，因为它通常不像大多数人期望的那样工作，并且需要额外的css才能使其按预期工作。您真正想要的是其他人所说的（删除绝对声明），或者正如我所说的，使用边距或填充向下移动页面正文。