Z-indexing on ionic elements

Question

I'm developping a mobile/web app with Ionic Framework. I'm using a custom CSS header and a ion-slide-box, customized the pager but want it to overlap with this custom header.

I tried everything with positioning and z-index, but I can't manage to show the pager over the CSS shape.

The Code:

.bandeau
{
  position: relative;
  top: 0;
  height: 70px;
  width: 100%;
  background-color: #555555;
  margin-bottom: 80px;
}
.oval {
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 60% / 30px;
  position: absolute;
  height: 100px;
  width: 100%;
  top: 60%;
  background-color: #555555;
}
.slider-pager {
  display: block;
  background-color: white;
  position: absolute;
  z-index: 1000;
  top: -30px;
  height: 48px;
}
.slider-pager .slider-pager-page {
  position: relative;
  background-color: gray;
  border-radius: 100%;
  max-width: 72px;
  width: 48px;
  z-index: 10;
  height: 100%;
}
.pager-image {
  width: 100%;
}
.slider {
  height: 100%;
  background-color: white;
}
.ion-slide {
  background-color: white;
}

<div class="bandeau">
  <div class="oval"></div>
</div> <!-- TODO -->
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

<ion-view view-title="Catspads" align-title="left">
  <ion-slide-box show-pager="true">
    <ion-slide>
      <ion-content>

Screenshot (here the pager won't be over the header):

Solution

The only way I found to get rid of this was to programatically move the pager using JS to an upper HTML level, positionning it out of the ion-content tag. z-index worked as intended, but couldn't find a cleaner solution for this.