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

You need to sign in to view this answers

Related Post