浮动操作按钮隐藏在底部导航栏中

Question

<v-tooltip top>
  <template v-slot:activator="{ on }">
        <v-btn
          fab
          color="green"
          v-on="on"
          bottom
          right
          fixed
          :loading="isRefreshing"
          @click="refreshFiles"
        >
          <v-icon color="white">mdi-sync</v-icon>
        </v-btn>
      </template>
  <span>Refresh</span>
</v-tooltip>

<v-bottom-navigation v-if="isMobileViewVisible" app fixed grow shift>
  <template v-for="item in menuItems">
            <v-btn
              v-if="item.isVisible"
              :key="item.title"
              icon
              @click="goToRoute({ name: item.name, params: item.params })"
            >
              <span>{{ item.title }}</span>
              <v-icon>{{ item.icon }}</v-icon>
            </v-btn>

          </template>
  <v-btn icon @click="toProfileEdit">
    <span>Profile</span>
    <v-icon>mdi-account</v-icon>
  </v-btn>
</v-bottom-navigation>

我将 vuejs 与 vuetify 一起使用，我有一个查询卡在哪里，问题是我使用底部导航栏路由到各种组件（页面），并且每个页面的右下角都有一个浮动操作按钮，发出浮动操作按钮隐藏在底部导航栏中的问题。

有没有办法解决这个问题？？

任何有关示例的帮助将不胜感激..

如您所见，绿色按钮隐藏在底部导航栏后面。

Answer 1

尝试使用内联样式：

<v-btn style="z-index:100; bottom:72px;" fab ...