如何使可滚动div隐藏在标题和子标题的后面？

Question

我有一个标题，子标题和一长串信息，这些信息可以在我的应用程序中垂直滚动。 当前，信息列表在向上滚动时隐藏在标题的后面，但是它超过了子标题。

我尝试将子标题更改为绝对位置，并尝试将z-index添加到可滚动div和子标题中，但都没有起作用。 我也尝试过将子标题放入ion-content中，但随后它也会与列表信息一起滚动。

如何获取可滚动内容同时放在标题和子标题的后面？

如果需要，可以提供其他信息。

HTML

<ion-view hide-nav-bar="false">

  <div class="sub-header">
    <span class="name">{{ user.name }}</span>
  </div>

  <ion-content has-header="true">
    <div class="messages">
      <div class="message" ng-repeat="msg in messages">
        <div>{{ msg.date }}</div>
        <div>{{ msg.text }}</div>
        <hr ng-show="!$last"/>
      </div>
    </div>
  </ion-content>

</ion-view>

Answer 1

我通过在子标题中添加以下样式来完成我想要的工作：

.sub-header {
  background-color: #fff;
  position: relative;
  top: 50px;
  z-index: 1;
}

技巧是添加background-color: #fff 。