Question

我正在寻找一种解决方案，如果可以在Ionic上使用？我已经使用了z-index，但是什么也没发生。

HTML

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

CSS

ion-card {
  position: relative;
  height:30vh;
  width: 50vw;
  z-index: -1;
}

ion-card-content {
  height: 70%;
  z-index: -1;
}

ion-img {
  height: 20vh;
  width: auto;
  z-index: 2;
  position: absolute;
  margin-top: -50px;
}

我的结果：

Result

Answer 1

好像溢出被隐藏了。

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

// overlay-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>

//重叠card.page.scss

ion-card{
    height:30vh;
    width: 50vw;
    overflow: visible;    
}
ion-card-content{
    height: 70%;
    overflow: visible;    
}
ion-img{
    height: 20vh;
    width: auto;
    margin-top: -75px;
}

注意：如果没有ion-img的高度，我会得到一些奇怪的效果，因此您一定要进行设置。

Answer 2

page.html

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

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

page.scss

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

Answer 3

请尝试以下代码，这将帮助您解决问题。

ion-card.main-card{
  background: #D29034;
  border-radius: 4px 100px 10px 10px;
  max-width:500px;
  overflow: visible;
  margin-top: 80px;
}
.card-img{
  max-width:80px;
}
.card-main-content{
  background: #F3F0F1;
  border-radius: 4px 60px 10px 10px;
}
.card-amount{
  --background: transparent;
  --border-color: transparent;
  color: #fff;
}
.card-image-blk{
  --background: transparent;
  --border-color: transparent;
  margin-bottom: -30px;
  margin-top: -30px;
}

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/css/ionic.bundle.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.js"></script>
  <ion-app>
    <ion-content>
      <ion-card class="main-card">
        <ion-card-content class="card-main-content">
          <ion-item class="card-image-blk">
          <img class="card-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Vector_cup_of_coffee.svg/1094px-Vector_cup_of_coffee.svg.png" slot="end" />
            </ion-item>
        <ion-card-header>
          <ion-card-title>Madison, WI</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
        </ion-card-content>
          </ion-card-content>
        <ion-card-content>
    <ion-item class="card-amount">
    <ion-label>Card Button Item 2</ion-label>
      <ion-icon name="walk" slot="end"></ion-icon>
  </ion-item>
  </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>

离子4卡图像重叠

3 个答案: