title: Ionic 4 Card Image Overlap
body: <p>I am looking for a solution if it is possible on Ionic? 
  I already used a z-index but nothing happened.</p>
  
  <p><a href="https://i.stack.imgur.com/MYqa6.png" rel="nofollow noreferrer">Overlap Image on Ionic Card Content</a></p>
  
  <p>Html</p>
  
  <pre><code>&lt;ion-card&gt;
    &lt;ion-card-content&gt;
       &lt;ion-img src="./assets/img/pizza-manager.png"&gt;&lt;/ion-img&gt;
           &lt;/ion-card-content&gt;
           &lt;ion-card-header&gt;
              sample
           &lt;/ion-card-header&gt;
  &lt;/ion-card&gt;             
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>My Result: </p>
  
  <p><a href="https://i.stack.imgur.com/tmNax.png" rel="nofollow noreferrer">Result</a></p>