在绝对元素之后放置相对元素 [英] position relative elements after absolute elements

问题描述

我有一个网站上有绝对定位的元素，例如该网站的顶部导航:

I have a site with absolute positioned elements on it, for example the top Navigation of the site:

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

现在，我在以下站点上创建了一个粘性页脚: http://ryanfait.com/resources/footer-stick-to-页面底部/

Now I created a sticky footer like on the following site: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

现在，问题在于页脚会重叠" topNav，因为topNav定位在绝对位置，这意味着它在元素的常规浮点之外".相对位置不会通知"之前有topNav.

Now, the problem is that the footer will "overlap" the topNav, because the topNav is positioned absolute, which means it's "outside of the normal float of elements". The relative position will not "notice" that there is the topNav before.

在我开始为每个绝对定位的元素创建额外的推子div"之前，我最好问一下是否有比推子div"更好的做法，还是我甚至不应该在元素上使用绝对位置?

Before I start creating additional "pusher divs" for each absolute positioned element I would better ask if there are better practices than "pusher divs" or should I even not use position absolute on my elements?

JsFiddle此处: http://jsfiddle.net/dkxUX/15/

JsFiddle here: http://jsfiddle.net/dkxUX/15/

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

When you scale down your browserwindow you'll find #footer overlapping all elements before it.

推荐答案

您只需在主体或其他容器元素上应用140px的上边距/内边距，便可以计算出topNav的高度和偏移量.

You could just apply a 140px top margin/padding to the body or other container element which would make the topNav's height and offset accounted for.

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

Better yet, don't set position to absolute in this case - it appears to me that all you're doing is horizontally centering a 1000px wide div.

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

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

Update: I see your jsfiddle now. You could account for all absolutely positioned elements when setting the margin/padding as suggested in the first paragraph You are using absolutely positioned elements when normal document flow could be relied on.

这篇关于在绝对元素之后放置相对元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！