html - Div 容器显示错误的宽度并与第二个容器重叠

Question

从这里可以看出(请加宽):http://jsfiddle.net/CZayc/1368/ ，我想让我的导航栏宽度为浏览器宽度的 100%，并在居中的 1200 像素宽空间中放置一些链接 (First Second Third Fourth)。

不知道为什么，中间的容器刚好和导航栏重叠。更改导航栏上的 position: absolute; 会导致它缩小到 1200 像素大小(不需要)。我该怎么办？ link 容器也有问题，因为我无法将 First Second Third Fourth 置于所需的 1200px 空间中(可能是由于重叠)。

谢谢!

Answer 1

在元素上使用绝对位置会将其从内容流中移除:这意味着流中的其他元素就像它不存在一样。元素重叠是因为没有任何东西可以将中间内容推到标题下方。

您可以做两件事:

1. 停止使用绝对位置。正如@NendoTaka 所建议的那样，亲戚应该没问题。如果你还没有解释绝对定位的某些原因，那么

2. 为中间内容区域添加边距。

示例 CSS

.middle {
    background-color: #7f7f7f;
    height: 1050px;
    margin: 74px auto 0; /* height of nav plus its borders*/
}