Question

根据名称absolute或relative，这个位置让我感到困惑。我正在尝试创建一个简单的布局，其中标题表示静态，如果在.subheading中添加或删除了更多/更少的内容，.filter类会自行调整，但现在我的.filter class从顶部开始，而它应该相对于.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设置为固定标题的高度。并保留subheader并过滤原样。不需要定位它们。

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

Answer 2

.filters和.subheader无需position:absolute。

它比这更复杂，但简而言之，absolute位置允许您从流中移除元素并将其放在其父元素上。但要这样做，它的父母需要在position: relative，但我不认为在这种情况下你需要它。

只需在.subheader添加一个margin-top就可以了。:)

（实际上是约翰内斯的评论）

修改

小提琴中的解决方案：https://jsfiddle.net/derdnjzs/

定位后的内容

2 个答案: