Maxime B Maxime B - 6 months ago 62
CSS Question

Z-indexing on ionic elements

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):

Here the pager won't be over the header.

Answer

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.