Z-index not working on iPhone

I saw several topics about this one with no answers.
I would like to display an element on top between the toolbar and the content. It works fine on Android and browser, but on iOS, the element is displayed under the toolbar. I’m guessing it’s because of z-index not rendering correctly on iOS.

the code:

<ion-header no-border>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="start" name="arrow-back" color="secondary"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title color="secondary">title</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content fullscreen="true" slot="fixed">
  <div class="card">
    <div class="headerContent">
      <div class="avatar">
        <img src="../../assets/girl.png">
      </div>
    </div>
  </div>
</ion-content>
ion-toolbar {
    --background: url('../../assets/background.png') no-repeat center center / cover;
    min-height: 226px;
   position: absolute;
 }
 ion-content {
   position: relative;
   height: 100%;
   width: 100%;
 }

 ion-title {
   text-align: center;
   font-size: 25px;
   font-family: "FuturaBT";
   //margin-right: 46px;
 }

 ion-back-button {
   --icon-margin-start: 10px;
   --min-height: 14px;
   --min-width: 17px;
   --icon-font-weight: 0.5px;
 }

 .card {
   margin: 0 auto;
   z-index: -1;

   .headerContent {
     height: 226px;

     .avatar {
       width: 130px;
       height: 130px;
       position: relative;
       margin: 0 auto;

       img {
         display: block;
         border-radius: 50%;
         position: absolute;
         margin-top: 150px;
         border: 1px solid #ffffff;
         z-index: 100;
       }
     }
   }
 }
1 Like

Hi @hanaa, did you find a solution?

I’ve been struggling with the same problem for weeks.

It is something related with the viewport height but I cant get it working