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