Ionic 4 Card Image Overlap

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

Мой результат:

Результат

Answer 1

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 2

Пожалуйста, попробуйте этот код, это поможет вам решить вашу проблему.

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>
 

Answer 3

Похоже, что переполнение скрыто.

Я удалил большую часть вашего кода и просто поиграл с настройками переполнения, которые получили то, что вы ищете:

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

// overlapping-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 Я получал некоторые странные эффекты, поэтому вы должны обязательно установить это.