How can I achieve absolute positioning on a flex element?

I created following component

<!-- AppBar.vue -->
<template>
  <v-row>
    <v-spacer></v-spacer>
    <v-btn text="Our plans"></v-btn>
  </v-row>
</template>

and when used it looks like this

But when I change its position to be absolute like this

<div
  style="background-color: burlywood"
  class="h-screen"
>
  <v-container class="fill-height position-relative">
    <AppBar class="position-absolute top-0" />
  </v-container>
</div>

it is rendered like this

What am I doing wrong?

Why do I need to use absolute positioning on the app bar?

Because I have an image with vertically centered content inside of it and the app bar always on top, like this

Absolutely positioned elements are removed from normal flow layout, and any space they would have taken up is removed. v-row will require width: 100% to return to "normal"