css - 在绝对元素之后定位相对元素

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 是绝对定位的，这意味着它“在元素的正常 float 之外”。相对位置不会“注意到”之前有topNav。

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

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

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

Answer 1

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

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

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

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