Javascript 如何将Vuetify导航抽屉设置为始终位于所有其他应用程序组件之上

我想知道我该怎么做

对于某些组件，它似乎位于顶部，但其他组件，如传单（地图）组件，它们与我的侧抽屉重叠，因此我无法正确使用它

如何将导航抽屉设置为始终位于顶部，并具有比其他组件更高的z索引

打开您的根组件

App.vue

确保您的样式标记没有scoped属性，以便CSS可以全局应用

添加以下CSS

.v-navigation-drawer{
z指数：999999！重要；
}

我在

v-calendar

组件上遇到了非常类似的问题。导航抽屉用于除带有

v-calendar

的页面之外的任何其他页面

原来我没有正确使用元素

v-app

、

v-content

和

v-container

。你能分享你的

App.vue

内容让我们检查一下吗

我认为您应该寻找这种结构，而不是使用css技巧（不是我们不能，而是在使用组件时，我们不应该改变那么深）

例如，在我的应用程序中，它现在可以工作，我的结构如下：

<template>
  <v-app>
    <v-navigation-drawer ... />
    <v-content>
      <v-container>
        <router-view />
      </v-container>
    </v-content>
  </v-app>
</template>

---

我希望有帮助

这就是我的解决方案。另一点很重要的是向抽屉子组件添加z-index属性，这样我们可以确保抽屉始终位于顶部。了解有关堆叠上下文的更多信息：

<template>
  <v-row>
    <v-col>
      <v-sheet>
        <v-calendar />
      </v-sheet>
    </v-col>
  </v-row>
</template>