How can I make a scrollable div hide behind my header and sub-header?

Question

I have a header, sub-header and a long list of information that is vertically scrollable in my app. Currently, the list of information hides behind the header when it is scrolled upwards, but it goes over the sub-header.

I've tried changing the sub-header to be absolutely positioned, and I've tried adding a z-index to both the scrollable div and sub-header, but neither have worked. I've also tried putting the sub-header inside ion-content, but then it scrolls with the list information too.

How can I get the scrollable content to go behind both the header and the sub-header?

Additional information can be provided if needed.

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

I got it to do what I wanted by adding the following styles to the sub-header:

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

The trick was adding background-color: #fff .