CSS中的固定和重叠位置答案

【问题标题】：Fixed and overlayed position in CSSCSS中的固定和重叠位置
【发布时间】：2011-12-15 21:16:08
【问题描述】：

如何将 div 的位置固定在不覆盖在另一个 div 之上的位置？

例如：

<html>
<body>
<div style="background-color:black; height:200px;">
</div>
<div style="background-color:blue; height:400px;">
</div>
</body>
</html>

我想要的是顶部 div 始终位于顶部，但不阻止底部 div 的任何部分。例如：http://twitter.github.com/bootstrap/

顶部的黑色菜单始终保持在顶部，同时不会遮挡任何其他 div 的视图。我检查了该网站上的 topbar css 并将其插入到我自己的测试文档中，但我无法获得预期的效果。除了 "position:fixed;" 我还需要做什么？

【问题讨论】：

标签： html css

【解决方案1】：

一旦您开始滚动，您示例中的顶部栏确实会开始遮挡内容。但是，在您的情况下，我认为您应该在 body 的顶部添加一个等于黑条高度的填充。这样一来，一切都被推倒了，它不会覆盖任何其他东西。

【讨论】：

【解决方案2】：

这里有一个简单的例子来说明如何做到这一点

所以基本上：

body {
   padding-top:40px;
}
#top {
   position:fixed;
   top:0px;
   left:0px;
   height:40px;
   width:100%;
}

【讨论】：