什么会导致 HTML 块元素重叠？

Question

我基于 Hot Towel 模板启动了一个 MVC4 SPA Web 应用程序。我开始清理我不想要的页眉和页脚内容。我删除的其中一件事是从文件 app.css 中将margin-top 的section.main 设置为80px。我真的不希望标题占用这么多空间。但我对结果感到困惑。甚至在我删除之前，根据我的 Chrome 浏览器窗口的宽度，我在标题中看到了一些奇怪的行为。现在我已经删除了它，我看到了类似的奇怪的“包装”行为，它允许我的标题与我的内容重叠。

当标题宽度为 979 像素时，我的屏幕如下所示：

由于我只是重新调整浏览器窗口的大小，在 980 像素处，我跨越了一个阈值，导致内容在标题下向上滑动，如下所示：

什么可能导致这种重叠？我在哪里可以尝试使content section 严格低于header？我没有看到任何float 样式应用于所涉及的元素。

真正奇怪的是，尽管header 的大小变为0，但它包含的nav 元素在适当的大小下仍然清晰可见。一个容器怎么会小于它的内容呢？

我在可能相关的 app.css 中发现了这个：

@media only screen and (max-width: 979px) {
    .page-splash-message {
        font-size: 150%;
    }

    .navbar-fixed-bottom {
        position: fixed;
    }

    footer span {
        padding: 10px 50px;
        font-size: 14px;
    }
}

Answer 1

我通过更改我的 nav.html 文件解决了这个问题：

<nav class="navbar navbar-fixed-top">
(etc...)
</nav>

到：

<nav class="navbar navbar-static-top">
(etc...)
</nav>