如何使可滾動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 。