My component, called AppBar.vue, is structured like this:
<template>
<v-row>
<v-spacer></v-spacer>
<v-btn text="Our plans"></v-btn>
</v-row>
</template>
When I use it as intended, it looks like the image below:
https://i.sstatic.net/eWB7NPvI.pngHowever, if I change its position to absolute using the following code:
<div
style="background-color: burlywood"
class="h-screen"
>
<v-container class="fill-height position-relative">
<AppBar class="position-absolute top-0" />
</v-container>
</div>
The result is displayed differently, shown in the image link here:
https://i.sstatic.net/e8okqKdv.pngI am puzzled by what I may be doing incorrectly. Additionally, why must I utilize absolute positioning on the app bar? The reason being, I have an illustration with content aligned vertically within, and the app bar always positioned on top, illustrated in the image link provided:
https://i.sstatic.net/nSgltZnP.png