位置相对但固定标题

Question

我需要在这里的相对位置跟随Header：

但是我想在滚动内容时修复标题，所以我尝试了`position：fixed。

现在的问题是它看起来像那样：

有人有想法吗？

Answer 1

如果您的topbar的高度已知，请在内容中添加与顶部位置相同的宽度，查看代码或检查小提琴：

<div class ="topbar">

</div>
<div class="content">
<p>first line</p>
<p>abc</p>
<p>abc</p>
.
.
.
<p>abc</p>
</div>

CSS：

.topbar{
  position:fixed;
  width:100%;
  height:50px;
  background-color:#000;
  box-shadow: 0 6px 2px -2px gray;
}
.content{
  position: relative;
  top:60px;
}

fiddle

Answer 2

将一个等于标题高度的margin-top设置添加到内容容器中（即当前与固定标题重叠的元素）