Question

如何将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;”之外我还需要做什么？

Answer 1

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

Answer 2

以下是一个如何完成的简单示例

基本上：

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