How to get a "close" icon floating on the top right corner of a v-dialog

Question

currently I have a v-dialog that opens when the window does, and I'm trying to implement a v-icon in the top right corner of my v-dialog. Here is a wireframe:

I cant seem to get the icon in the top right corner of my dialog. I have tried creating a transparent div, putting the v-dialog into containers, etc, but I can't seem to figure it out. Here is my code:

<v-dialog 
        v-model="adPopup"     
        presistent
        @click:outside="closePopup" 
        max-width="700px">
          <Advertisements
          :adPopup="adPopup"
          @doNotShowValue="doNotShowVal"
          @closePopup="closePopup">
          </Advertisements>
      </v-dialog>

Advertisements.vue

<template>

            <v-card class="ad-card">
                <v-card-text class="pa-0">

                    <v-img max-width="100%" class="img-height" src="@/assets/PopUp.png">                    
                        <v-icon class="close-popup">mdi-close-circle</v-icon>
                    </v-img>
                </v-card-text>
                <v-card-actions class="card-actions">
                    <v-btn 
                    depressed
                    outlined
                    class="mr-1 mb-2 white--text ml-2" color="white" @click="closePopup(0)" style="text-transform: none;">Close</v-btn>
                        <v-checkbox
                        style="color: #ffffff; border-color: white"
                        color="white"
                        class="mt-2 ml-2 custom-checkbox"
                        v-model="doNotShow">
                        </v-checkbox>
                        <p class="mt-2 white--text">Do not ask me again</p>
                    <v-spacer></v-spacer>
                    <v-icon>    <font-awesome-icon icon="times" /></v-icon>
                    <v-btn class="mb-2 white--text view-products mr-2" color="#4D95B6" @click="closePopup(1)" style="text-transform: none;">View Produts</v-btn>
                </v-card-actions>
            </v-card>    
</template>

Answer 1

I think you have to either allow overflow on the v-card, or put the button in a container around the card.

<v-card class="overflow-visible">
  <v-btn
    class="close-popup"
    icon="mdi-close-thick"
    color="black"
    size="x-small"
    elevation="0"
  />
  ...

or

<div class="position-relative">
  <v-btn
    ...
  />
  <v-card>...</v-card>
</div>

Then you can use absolute positioning to get it to the right and then translate it to the corner:

  .close-popup {
    position: absolute !important;
    right: 0;
    transform: translate(50%, -50%);
    border: 3px solid white !important;
  }
  .close-popup .mdi {
    font-size: 24px;
  }

Have a look at the playground