Angular Ionic 4卡图像重叠

我正在寻找一个解决方案，如果有可能的离子？ 我已经使用了z索引，但什么也没发生

Html

我的结果是：

---

看起来溢出正在被隐藏

我删除了您的大部分代码，只是使用了溢出设置，获得了您想要的：

//重叠-card.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>overlapping-card</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <br>
  <br>
  <br>
  <br>
  <ion-card>
    <ion-card-content>
      <ion-img src="./assets/pizza.png"></ion-img>
    </ion-card-content>
    <ion-card-header>
      sample
    </ion-card-header>
  </ion-card>
</ion-content>

---

注意：如果没有ion img上的高度，我会得到一些奇怪的效果，所以你应该确保设置它。

看起来溢出被隐藏了

我删除了您的大部分代码，只是使用了溢出设置，获得了您想要的：

//重叠-card.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>overlapping-card</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <br>
  <br>
  <br>
  <br>
  <ion-card>
    <ion-card-content>
      <ion-img src="./assets/pizza.png"></ion-img>
    </ion-card-content>
    <ion-card-header>
      sample
    </ion-card-header>
  </ion-card>
</ion-content>

---

注意：如果没有ion img上的高度，我会得到一些奇怪的效果，因此您应该确保设置它。

page.html

<ion-card>
   <ion-card-header>
      sample
   </ion-card-header>
</ion-card>   

<ion-img src="../../assets/images/feature-bootstrap.png"></ion-img>

---

page.html

<ion-card>
   <ion-card-header>
      sample
   </ion-card-header>
</ion-card>   

<ion-img src="../../assets/images/feature-bootstrap.png"></ion-img>

---

请尝试此代码，这将帮助您解决问题

ion-card.main-card{
背景：#D29034；
边界半径：4x100px 10px 10px；
最大宽度：500px；
溢出：可见；
边缘顶部：80px；
}
.卡img{
最大宽度：80px；
}
.卡的主要内容{
背景#F3F0F1；
边界半径：4px 60px 10px 10px；
}
.卡金额{
--背景：透明；
--边框颜色：透明；
颜色：#fff；
}
.card image blk{
--背景：透明；
--边框颜色：透明；
边缘底部：-30px；
利润上限：-30px；
}

威斯康星州麦迪逊
麦迪逊建于1829年，位于莫诺纳湖和门多塔湖之间的地峡上，1836年被命名为威斯康星州的首府。
卡片按钮项目2

请尝试此代码，这将帮助您解决问题

ion-card.main-card{
背景：#D29034；
边界半径：4x100px 10px 10px；
最大宽度：500px；
溢出：可见；
边缘顶部：80px；
}
.卡img{
最大宽度：80px；
}
.卡的主要内容{
背景#F3F0F1；
边界半径：4px 60px 10px 10px；
}
.卡金额{
--背景：透明；
--边框颜色：透明；
颜色：#fff；
}
.card image blk{
--背景：透明；
--边框颜色：透明；
边缘底部：-30px；
利润上限：-30px；
}

威斯康星州麦迪逊
麦迪逊建于1829年，位于莫诺纳湖和门多塔湖之间的地峡上，1836年被命名为威斯康星州的首府。
卡片按钮项目2

<ion-card>
   <ion-card-header>
      sample
   </ion-card-header>
</ion-card>   

<ion-img src="../../assets/images/feature-bootstrap.png"></ion-img>

ion-card{
    position: relative;
    height:250px;
    width: 250px;

ion-card-content{
    height: 70%;
    z-index: -1;
  }
}
ion-img{
    width: 200px;
    position: absolute;
    top: 0;
    right: -6px;
}