Vuetify：如何让导航抽屉覆盖应用栏（恢复旧版布局）

Vuetify 3.6版本调整了v-app-bar和v-navigation-drawer的默认层级逻辑，导致原本抽屉覆盖应用栏的行为反转了。不用改动核心布局结构，试试下面几种方法恢复旧效果：

• 手动指定抽屉的z-index：
  v-app-bar默认z-index为1000，给抽屉设置更高的层级即可：

  <v-navigation-drawer app style="z-index: 1001 !important;">
    <!-- 抽屉内容 -->
  </v-navigation-drawer>
  

• 调整DOM渲染顺序：
  把v-navigation-drawer放在v-app-bar之后渲染（DOM流中靠后的元素层级更高，除非被z-index覆盖），同时确保抽屉顶到窗口顶部：

  <v-app>
    <v-navigation-drawer app style="top: 0;">
      <!-- 抽屉内容 -->
    </v-navigation-drawer>
    <v-app-bar app>
      <!-- 应用栏内容 -->
    </v-app-bar>
    <!-- 页面主体内容 -->
  </v-app>
  

• 使用elevation属性提升层级：
  Vuetify的elevation属性对应不同z-index值，给抽屉设置比应用栏更高的elevation（默认app-bar为elevation="4"）：

  <v-navigation-drawer app elevation="12">
    <!-- 抽屉内容 -->
  </v-navigation-drawer>
  

• 检查clipped属性：
  如果之前给抽屉或应用栏加了clipped属性，3.6版本对该属性的行为做了调整，尝试移除抽屉的clipped或者修改应用栏的clipped设置，看是否能恢复原布局。

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