如何在 Flex 元素上实现绝对定位？

Question

我创建了以下组件

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

使用时看起来像这样

但是当我像这样将其位置更改为绝对时

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

渲染成这样

我做错了什么？

为什么我需要在应用栏上使用绝对定位？

因为我有一个图像，其中内容垂直居中，并且应用栏始终位于顶部，如下所示

Answer 1

绝对定位的元素将从正常的流布局中删除，并且它们占用的任何空间都将被删除。

v-row

将需要

width: 100%

恢复“正常”