# Z-index doesn't word in ion-card on iphones

**URL:** <https://forum.ionicframework.com/t/z-index-doesnt-word-in-ion-card-on-iphones/210962>\
**Category:** Ionic Angular\
**Created:** [June 11, 2021, 1:42pm UTC](https://forum.ionicframework.com/t/z-index-doesnt-word-in-ion-card-on-iphones/210962 "2021-06-11T13:42:38Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![gpandr](https://avatars.discourse-cdn.com/v4/letter/g/35a633/32.png) [@gpandr](https://forum.ionicframework.com/u/gpandr)\
**Post date:** [June 11, 2021, 1:42pm UTC](https://forum.ionicframework.com/t/z-index-doesnt-word-in-ion-card-on-iphones/210962/1 "2021-06-11T13:42:38Z")

</div>

I have a problem with z-index property on iphone  
The ion-card component should overlap the ion-header, as it has margin-top: -20px and z-index: 100 and that works on android, but on iphone it doesn’t  
apparently on iphone the z-index property of the ion-car is not being respected

```auto
-------------html page
<app-header ></app-header>

<ion-content class="my-card">
	<ion-card> </ion-card>
</ion-content >

-------------css ion-card----
.my-card {
	--ion-background-color: #ffffff;

	ion-card {
		--ion-background-color: var(--ion-color-light);

		z-index: 100 !important;
		margin-top: -20px;
		padding-top: 0px;
		padding-bottom: 5px;
		margin-bottom: 45px;
	}
 }
		
-------------ion-header in component

<ion-header [translucent]="true" class="my-header">
  <ion-toolbar color="primary">
    <ion-title>
      <h2></h2>
      <h4></h4>
    </ion-title>
    <ion-buttons >
     
    </ion-buttons>
  </ion-toolbar>
</ion-header>

----------css ion-header
.my-header {

  ion-toolbar {
    --min-height: 100px !important;

    ion-title {
      padding-inline-start: 30px;
      -webkit-padding-start: 30px;

      padding-inline-end: 30px;
      -webkit-padding-end: 30px;

      h1,
      h2 {
        font-size: 22px;
        margin-top: 0;
        margin-bottom: 0;
      }

      h4 {
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }
}

```

![example](https://global.discourse-cdn.com/ionicframework/original/3X/b/7/b702998037088354d2fd7bd9ba27ada230b7e44b.jpeg)