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

【问题标题】：Div container shows wrong width and overlaps second containerDiv 容器显示错误的宽度并与第二个容器重叠
【发布时间】：2015-05-15 10:17:05
【问题描述】：

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

我不知道为什么，但是中间的容器刚好覆盖了导航栏。在导航栏上更改 position: absolute; 会导致它缩小到 1200 像素大小（不需要）。我能做些什么呢？ link 容器也有问题，因为我无法将 First Second Third Fourth 居中在所需的 1200px 空间中（可能是由于重叠）。

谢谢！

【问题讨论】：

我将位置更改为相对导航，为我修复了它并且没有缩小宽度。

标签： html css containers nav overlap

【解决方案1】：

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

你可以做两件事：

停止使用绝对位置。正如@NendoTaka 建议的那样，相对应该没问题。如果您没有解释绝对定位的某些原因，那么
在中间内容区域添加边距。

示例 CSS

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

【讨论】：

感谢您的回复，但是将:absolute 更改为:relative 会将我的导航栏缩小到正文大小（1200 像素），这就是我使用它的原因。那我还有什么其他选择？我应该使用保证金吗？谢谢。

【解决方案2】：

您可以通过添加 margin-top: https://jsfiddle.net/CZayc/1371/ 将 .middle 移开

确保将margin-top 设置为.nav 的高度。这也包括边框。

【讨论】：

【解决方案3】：

将导航类更改为

.nav {
    background-color: #34384A;
    height: 70px;
    width: 100%;
    border-top: solid;
    border-bottom: solid;
}

注意：您不需要width: 100%，但以防万一。

【讨论】：

【解决方案4】：

您需要将 position:relative 应用于 .nav 和 .middle

您之前的问题是 .nav 具有导致重叠的绝对位置。相对定位可以防止这种情况发生，因为它会相对于 HTML 中编写的前一个 div 格式化每个 div。

.nav {
    position: relative;
    background-color: #34384A;
    height: 70px;
    /* position: absolute; */
    left: 0;
    right: 0;
    border-top: solid;
    border-bottom: solid;
    }

.middle {
    position: relative;
    background-color: #7f7f7f;
    height: 1050px;
    margin: 0 auto;
}

【讨论】：

【解决方案5】：

您试图解决问题的错误问题。下面的示例是您的代码的清理版本。

* { margin:0; padding:0 }

nav {
  background-color: #34384A;
  height: 70px;
  border-top: solid;
  border-bottom: solid;
  text-align: center;
}

<header>Test test</header>

<nav>
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
  <a>Foruth</a>
</nav>

<div class="middle">
 11111<br>22222<br>33333<br>44444<br>55555<br>66666
</div>

<footer>Test</footer>

请注意您使用的 HTML。您选择的 HTML 标记应该为它们包装的内容提供意义。此外，您应该避免使用position: absolute 来解决诸如此类的一般布局问题。

希望对您有所帮助。

【讨论】：