How to cancel a image with a button on top of it?

[chentao169]

I wanna add a cancel button on top of an image so that when I click the button, the image will be removed.
Below is my code. But somehow, the button is not clickable.
Any ideas? thx

<div v-if="imageLinks">
  <q-img
    v-for="(url, idx) in imageurls"
    :key="idx"
    :src="url"
    spinner-color="white"
    style="height: 80px; max-width: 80px"
    class="q-mt-lg q-mr-lg"
  >
    <q-btn
      color="grey-5"
      icon="eva-close-outline"
      size="xs"
      style="position: absolute; right: 0px; top: 0 px; z-index: 1000000"
      round
      @click="removeImage(idx)"
      unelevated
    />
  </q-img>
</div>

[MilosPaunovic]

Create a Codepen reproduction.

[chentao169]

<div
          v-for="(url, idx) in imageurls"
          :key="idx"
          class="q-mt-md q-mr-md"
          style="
            border-radius: 4px;
            border: 1px solid #ddd;
            display: inline-block;
            height: 80px;
            position: relative;
            width: 80px;
          "
        >
          <q-img
            :src="url"
            class="q-ma-xs"
            alt="uploaded image"
            fit="fill"
            spinner-color="white"
          />
          <q-btn
            @click="removeImage(url)"
            color="grey-5"
            icon="eva-close-outline"
            size="xs"
            style="position: absolute; top: -10px; right: -10px"
            round
            unelevated
          />
        </div>

I resolved this by wrapping everything into a div.