cssvue.jsvuejs3vuetify.jsvuetifyjs3

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 app bar displayed correctly

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 app bar displayed wrongly

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 example result


Solution

  • 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"