知道为什么这些 DIV 会重叠吗？答案

【问题标题】：Any idea why these DIVs are overlapping?知道为什么这些 DIV 会重叠吗？
【发布时间】：2012-08-10 08:25:11
【问题描述】：

我这辈子都不能出这个...

有谁知道为什么此页面底部的大红色 div 没有在其上方的 DIV 下方流动，（但红色 div “出现”在其后面，并被部分覆盖）？

页面顶部的 ABOUT div 在其上方的 div 后面流动，我遇到了同样的问题。我能找到解决它的唯一方法是定位：相对，并将顶部设置为 45px。相同的修复在这里有效，但我宁愿弄清楚为什么它没有在它上面的内容下方流动而不是破解它。它上面的 Div 应用了 clearfix，这个问题似乎与浮点数没有任何关系......除了我完全没有想法，而且对 CSS 来说仍然相当新......

http://firewalkcreative.com/2012/2012.html

【问题讨论】：

所以检查一下...如果我这样做，那么我会在上面的 DIV 中遇到问题...

标签： css html

【解决方案1】：

其正上方的部分 (id="work") 具有样式“位置：相对；顶部：45px”。这将它从原本的位置向下移动了 45 像素，覆盖了下一节的顶部。

【讨论】：

就是这样 - 删除顶部：45px；你有你的解决方案。
刚刚进行了更改，并重新发布了它..您可以看到问题进一步上升：firewalkcreative.com/2012/2012.html
如果您在页面上跟踪问题，它会以 nav id="mainNav" 开头。它高 45 像素，位置=绝对。绝对定位意味着它不包含在页面流中。其他元素的位置就好像它不存在一样。
所以我通过添加一个空的 DIV 并使其高 45px 以考虑导航栏的高度来解决它......这似乎解决了这个问题。但是现在，我的链接“关于、工作、联系”链接了页面上似乎 45 像素过低的内容......知道为什么会发生这种情况或如何解决它吗？