Question

我的网站顶部有一个“功能区”标题：

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

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

有更好的方法吗？

Answer 1

绝对定位的元素（top-wrapper）总是在相对元素（pagebody）之上，除非你用z-index做一些hacky东西（甚至是有限的）。您可能想要做的是将pagebody元素向下移动到顶部包装器之后。我不知道你的顶部包装器有多高，因为它没有指定的高度。由于字体大小的不同，你可能不知道它。但总的来说，你只需要在pagebody标签上添加一个上边距或填充，如下所示：

margin-top:50px;

Answer 2

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

您可以使用width: 100%，但请务必删除它留下的默认差距：

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

您还应该查看necolas'normalize.css。它包含了几乎每个站点都需要的所有基本CSS规则：）

Answer 3

绝对定位会使一个元素脱离正常流量。您不需要绝对定位来最大化宽度。你这样做的宽度为：100％。

Answer 4

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

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

你没有提供HTML，所以我们真的不知道你到底在做什么。

为什么我的绝对定位div掩盖了我的亲戚div？

4 个答案: