如何在Flex元素上实现绝对定位？Vuetify AppBar定位异常求助

你的问题出在绝对定位元素的宽度约束丢失：当给AppBar添加position-absolute后，元素默认宽度由内容撑开，而组件内部的v-row依赖父容器宽度铺满全屏，导致v-spacer无法正常工作，按钮位置错乱。

快速修复方案 #

给AppBar添加w-100类，强制它占满父容器宽度：

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

同时确保AppBar内部的v-row也能铺满宽度（如果默认没生效，给v-row也加w-100）：

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

更符合Vuetify规范的实现方式 #

如果要做固定顶部导航栏，推荐直接用Vuetify内置的v-app-bar组件，它自带app和top属性可一键实现固定顶部，同时自动处理宽度和布局：

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

然后在父组件中用v-app和v-content布局，确保下方内容自动避开导航栏并垂直居中：

<v-app>
  <AppBar />
  <v-content>
    <div 
      style="background-color: burlywood" 
      class="h-screen d-flex align-center justify-center"
    >
      <!-- 这里放置你的垂直居中图片 -->
      <img src="你的图片路径" alt="示例图片" />
    </div>
  </v-content>
</v-app>

内容的提问来源于stack exchange，提问作者PyKKe