Ion-content and z-indexing, one over and one under


#1

Hello !

I’m working on an app, and want to achieve something ‘exotic’ in term of design.
In the screenshot below, I wan’t the cat rounded picture to go over the fixed top grey header banner, and the rest to go under (as the picture is z-indexed over the header, and rest is not).

When I’m integrating a ion-content to wrap it all, z-indexes goes mad and I can’t manage to achieve this effect.
I thought doing two scrollable areas binded together and z-indexed differently would do the job, but I can’t get if and how I can do that.

Thanks for the help!

HTML:
<ion-view view-title="Cat informations" class="animated slideInUp"> <div class="bandeau" id="bandeau"> <div class="oval"></div> </div> <div ng-if="cat"> <div class="catHeader patternBg"> <div class="centerAbsolute rounded-image-parent rounded-image-cat-position scale-cat"> <div class="rounded-image counter-center-circle" back-img="{{cat.image}}"> </div> <div class="catStatsHeader"> <div class="center"> <img src="/img/pictos/age-badge.svg" class="catsStatsHeaderPictos age"> <div class="ageText" ng-if="cat.value == 'months'"> {{::cat.age}}<br/><ng-pluralize count="cat.age" when="{'1': 'month old', 'other': 'months old'}"></ng-pluralize> </div> <div class="ageText" ng-if="cat.value == 'years'"> {{::cat.age}}<br/><ng-pluralize count="cat.age" when="{'1': 'year old', 'other': 'years old'}"></ng-pluralize> </div> </div> <div class="center"> <img src="/img/pictos/weight-badge.svg" class="catsStatsHeaderPictos weight"> <div class="weightText" ng-if="cat.weight == '0'"> ? </div> <div class="weightText hasWeight" ng-if="cat.weight > 0"> {{::cat.weight}}<br/><span>Kg</span> </div> </div> </div> </div> </div> <div class="text-center capitalize cat-detail-name"> {{::cat.name}} </div> </div> </ion-view>


#2

Bump :), really need to find this out!