I expected the circles to be 1,2,3 and 4, but the output is 4,1,2 and 3. I don't know if position:absolute; is causing it to happen. Any feedback is welcome.

<template>
  <q-page class="column flex-center">
    <q-card class="my-card">
      <q-card-section>
        <div class="text-h6">Our Changing Planet</div>
        <div class="text-subtitle2">by John Doe</div>
      </q-card-section>

      <div
        v-for="index in 4"
        :key="index"
        class="circle"
        :style="`background-color: ${[index]}`"
      >
        {{ index }}
      </div>
    </q-card>
  </q-page>
</template>

<script setup></script>
<style lang="scss">
.my-card {
  width: 200px;
  height: 200px;
}

.circle {
  position: absolute;
  top: 20px;
  right: 0;
  background-color: $positive;
  width: 20px;
  height: 20px;
  border-radius: 50% !important;
  z-index: 1;
}

.circle:nth-child(2) {
  top: 40px;
  background-color: $negative;
}

.circle:nth-child(3) {
  top: 60px;
  background-color: orange;
}

.circle:nth-child(4) {
  top: 100px;
  background-color: grey;
}
</style>

https://stackblitz.com/edit/quasarframework-bybqfg?file=src/pages/IndexPage.vue