在绝对元素之后放置相对元素

Question

我有一个带有绝对定位元素的站点，例如站点的顶部导航：

#topNav
{
  position:     absolute;
  top:          100px;
  left:         50%;
  height:       40px;
  width:        1000px;
  margin-left:  -500px;
}

现在我在以下网站上创建了一个粘性页脚：http : //ryanfait.com/resources/footer-stick-to-bottom-of-page/

现在，问题是页脚将“重叠”topNav，因为 topNav 是绝对定位的，这意味着它“在元素的正常浮动之外”。相对位置不会“注意到”之前有topNav。

在我开始为每个绝对定位元素创建额外的“pusher div”之前，我最好问问是否有比“pusher divs”更好的做法，或者我什至不应该在我的元素上使用绝对位置？

编辑： JsFiddle 在这里：http : //jsfiddle.net/dkxUX/15/

当您缩小浏览器窗口时，您会发现 #footer 与它之前的所有元素重叠。

Answer 1

您可以将 140px 顶部边距/填充应用于主体或其他容器元素，这将考虑到 topNav 的高度和偏移量。

更好的是，在这种情况下不要将位置设置为绝对 - 在我看来，您所做的只是将 1000px 宽的 div 水平居中。

/*top-margin of 100px + center the element*/
#topNav {width:1000px; height:40px; margin:100px auto 0;}

更新：我现在看到你的jsfiddle了。按照第一段中的建议设置边距/填充时，您可以考虑所有绝对定位的元素当可以依赖正常的文档流时，您正在使用绝对定位的元素。