Estoy trabajando con Vue 3 y Bootstrap 5 .

Tengo una v-for donde quiero mostrar la última carta arriba y las otras abajo. Pero ahora todos están ordenados uno encima del otro.

Quiero que la card sobre la card que se muestra a continuación se superponga a la mitad.

He intentado poner la position en absolute , pero todas las cards estarán una encima de la otra.

¡Espero que alguien pueda ayudarme!

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