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

Question

我的网站顶部有一个“ 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;
}

我唯一能找到的解决方案是在top-wrapper的末尾与pagebody的开始之间添加一堆<br> 。

有更好的方法吗？

Answer 1

绝对定位的元素（顶部包装器）始终位于相对元素（页面主体）的顶部，除非您使用z-index进行了一些骇人听闻的工作（甚至是有限的）。 您可能想做的就是将pagebody元素向下移到最顶端的包装器的上方。 我不知道您的顶层包装机有多高，因为它没有指定的高度。 由于字体大小的差异，您可能不知道。 但总的来说，您只需要在pagebody标签中添加上边距或填充，如下所示：

margin-top:50px;

Answer 2

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

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

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

您也应该检查出necolas' normalize.css 。 它包括几乎每个站点都需要的所有基本CSS规则：）

Answer 3

绝对定位会使元素脱离正常流动。 您无需绝对定位即可最大化宽度。 您使用width：100％做到这一点。

Answer 4

有很多方法可以做到这一点。 首先，您可以将顶部包装放置在pagebody元素外部，然后将其宽度定义为100％。

如果您有一个功能区的图形，并且应该与pagebody元素的顶部重叠-就像我在上面说的那样-那么您将使用位置绝对值和z-index将其放置在pagebody元素上方。 然后将适当的padding-top添加到pagebody。

您没有提供html，所以我们真的不知道您要做什么。