Добавить плавающую кнопку внутри v-img в v-card

Question

Я хотел бы иметь плавающее в нижней правой части изображения внутри карты.

вот мой образец https://codepen.io/chunallen/pen/bPGJOP?editors=1000

Проблема в том, что кнопка находится за v-card-title

Ожидаемый результат

Answer 1

Если вы добавите style="height: 100px; position: relative" к v-card-title, переместите btn под h3 и смените снизу вверх, тогда это будет работать.

<v-card-title primary-title style="height: 100px; position: relative">
    <div>
        <h3 class="headline mb-0">Kangaroo Valley Safari</h3>
        <v-btn color="pink" dark small absolute top right fab>
            <v-icon>add</v-icon>
        </v-btn>
    </div>
</v-card-title> 

Образец