修正v-menu和v-list的z-index:如何在vuetify中使菜单与内容重叠?

我有以下的菜单设置,我想你可以立即看到问题所在。

形象

正如你可能看到的,我有一个包含菜单的v-app-bar,和一个主要的内容区。

v-menu被页面内容中的v-card所重叠。

试图在v-menu上设置z-index属性,却发现 不是 帮助。

形象

一些调查显示了我不知道的关于z-index的有趣信息:一些对象的行为是不同的,有不同的z-index堆栈,它们是不相关的,等等。

我建议 这篇关于你应该知道的z-index的出色介绍 .

解决方案。

解决办法

你需要在v-app-bar中设置一个样式。仅有z-index是不够的,你还必须设置 位置:相对 以使其正确呈现。

<v-app-bar fluid color=”white” elevation=”2″ style=”position: relative; z-index: 3″>

形象

修复后,菜单现在与主内容中的V卡重叠--正如想要使用菜单的用户所期望的那样。

完整的标记(简略的)。

<template>
     <div class="”box" box-default” style="”z-index:2″">
     <v-app>
       <v-content >
         的情况
       <v-app-bar fluid color=”white” elevation=”2″ style=”position: relative; z-index: 3″>
         的内容
           <v-row>
           …
          <v-spacer></v-spacer>
     。
       。
         <v-btn
           小
           color="primary"
           v-on="on"
           文本
         >
         fa fa-bars。
           行动
         </v-btn>
       </template>
       的情况下
       …
         <v-list-item :to=”{ name: ‘Help’ }”>
           fa-question-circle帮助
         </v-list-item>
       </v-list>
       。
       …
     </v-menu>
     </v-row>
     …
     </v-container>
     </v-app-bar>
           。
         </v-container>
       </v-content>
     </v-app>
     </div>
</template>

注意:主要内容是在路由器视图中呈现的,(我使用vue-router为即将到来的 皮座 版本)。

我是如何找到这个解决方案的?

我使用谷歌浏览器的DevTools,手动浏览每一个包装元素的设置,设置z-index并尝试不同的位置,直到找到合适的元素来应用它。

然后我进入vue的标记,应用了一个 "background-color:red "的样式,并检查我是否找到了正确的元素。

我试着在我确定的vue元素上设置一个z-index属性(v-app-bar 渲染到

),然而这并没有被正确渲染。因此,我直接在样式中设置了z-index,这被正确应用。

参考文献。