angular - Z-index 不在 iphone 上的 ion-card 中输入

Question

我对 iphone 上的 z-index 属性有疑问 ion-card 组件应该与 ion-header 重叠，因为它具有 margin-top: -20px 和 z-index: 100 并且适用于 android，但在 iphone 上却没有t 显然在 iphone 上 ion-car 的 z-index 属性没有得到尊重

<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;
      }
    }
  }
}```

[image with example][1]


  [1]: https://i.stack.imgur.com/mDnEj.jpg

标签： angulariphoneionic-frameworkionic5