5

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

#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 与它之前的所有元素重叠。

4

2 回答 2

2

您可以只对 body 或其他容器元素应用 140 像素的上边距/填充，这将使 topNav 的高度和偏移量得到考虑。

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

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

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

于 2012-06-22T08:26:37.327 回答
2

给出答案有点太晚了，但它可能会在未来对某人有所帮助，我不久前就提出了这个问题，所以这是我的镜头，使用 jquery，因为我无法想出一个 CSS 解决方案没有删除 DOCTYPE 标签（无论如何，这不是你应该做的事情）。

所以就在这里。

$("#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 放置在它之后，这就像一个明确的修复一个没有想法的人。

于 2014-05-15T18:39:53.327 回答