I'm working with Vue 3and Bootstrap 5.

I have a v-for where I want to show the last card on top and the other ones below. But now all are ordered above each other.

I want to have that the card over the card which is showed below is overlapping half of it.

I've tried to put the position on absolute but than all cards will be on top of each other.

Hopefully someone could help me out!

<div v-for="(item, index) in array" :key="item.id">
  <div v-if="index == (array.length - 1)">
    <div class="card p-1">
      <div class="row">
        <div>{{ item.id }}</div>
      </div>
      <div class="row">
        <div class="text-center">
          <h1><i :class="item.icon"></i></h1>
        </div>
      </div>
      <div class="row">
        <div style="text-align: right;">
          <div>{{ item.id }}</div>
        </div>
      </div>
    </div>
  </div>
  <div v-if="index != (array.length - 1)">
    <div class="card p-1">
      <div class="row">
        <div>Value</div>
      </div>
      <div class="row">
        <div class="text-center">
          <h3>ICON</h3>
        </div>
      </div>
      <div class="row">
        <div style="text-align: right;">
          <div>Value</div>
        </div>
      </div>
    </div>
  </div>
</div>