html - 固定位置后的内容

Question

根据名称，absolute 或 relative，这个位置真的让我感到困惑。我正在尝试创建一个简单的布局，标题显示为静态，如果在 .subheading 中添加或删除了更多/更少的内容，则 .filter 类会自行调整，但是现在我的 .filter 类是从顶部开始的，而它应该相对于 .subheading。

我做错了什么？

https://codepen.io/codearts/pen/GvEoBZ

.header{
  position:fixed;
  background:black;
  height:60px;
  width:100%
}
.subheader{
  height:40px;
  background:grey;
  position:absolute;
  top:60px;
  width:100%;
}
.filter{
  position:absolute;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="header"></div>
      <div class="subheader">
        This can be either
      </div>
    </div>
    <div class="filter">
        <div class="col-6">
          This can be col-1
        </div>
          <div class="col-6">
        This can be col-2
        </div>
    </div>
  </div>
</div>

Answer 1

我正在尝试解决您的问题，但不确定这对您的情况是否有帮助，请尝试以下 [fidder][1]。

您应该做的是将所有三个 div 放入一个容器中，并将 padding-top 设置为固定标题的高度。并保持副标题和过滤器不变。无需定位它们。

  [1]: https://jsfiddle.net/rajsnd08/5mra9tsv/2/