我如何让我的固定元素独立而不在其他内容之上

Question

我在页面顶部有一个div，专门用作顶部栏。我希望这个位置是固定的，这样滚动时它就保持在同一个位置。但是。。一旦我应用了固定的定位，所有的内容都会向上移动大约30px（条的大小），并位于条的后面，使标题看起来比它应该的高度更小。

一旦position:fixed的css从#topbar中删除，内容就会向下移动到所需的位置通过代码笔编码：http://codepen.io/Hafkamp/pen/jabmE

css

#topbar{position:fixed}

Answer 1

在#topbar中添加CSS:

#topbar{
    top:0;
}

此外，在#标题中添加：

#header{
    margin-top:30px;
}

这样，你的#topbar将粘在页面顶部，下面的html将被向下推30px（#topbar的高度）

Answer 2

只需将margib顶部赋予30像素的标头