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。

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

修改 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。 ~~根据第一段中的建议设置边距/填充时，您可以考虑所有绝对定位的元素~~当可以依赖正常的文档流时，您正在使用绝对定位的元素。

Answer 2

有点太迟了无法给出答案，但它可能会帮助将来的某个人，我不久前想出了这个问题，所以这是我的镜头，使用jquery，因为我无法想出一个没有删除DOCTYPE标记的CSS解决方案（不管怎么说，这不是你应该做的事情）。

所以就是这样。

$("#CONTAINERDIV").prepend("<div id='relativefix' style='position:relative;margin-top:"+($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px'></div>");


$(window).resize(function(){
$("#relativefix").css("margin-top",($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px");
            });

所以是的，这就是它的全部内容，你只需要在容器的开头动态添加另一个div，这个div位于绝对div下面，这会迫使所有后续的相对div放在我之后，它就像一个明确解决那些没有想法的人。

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

2 个答案: