相对位置，但标头固定

Question

我需要在以下相对位置放置以下标头：

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

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

有人有主意吗？

Answer 1

如果您知道顶栏的高度，则将与顶部位置相同的宽度添加到内容中，查看代码或检查小提琴：

<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;
}

小提琴

Answer 2

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