如何在我的应用栏上方（z-index）显示我的小吃店？

Question

我有这个小吃店，它工作得很好，但它显示在 headerBar 下。 有时，我必须向上滚动才能看到它。 用户将错过重要的警报消息，并且不知道发生了什么。 我希望将它显示在所有其他组件之上。

 <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <template id="mainbox"> <v-container> <v-row> <v-col cols="12"> <v-card outlined> <div class="text-overline mb-4"> {{ title }} </div> <:-- -------------------------------------------------------------------------- --> <div class="py-10"></div> <.-- -------------------------------------------------------------------------- --> <,-- TEST CODE --> <:-- --------- --> <v-app-bar app color="green lighten-2" dark v-if="showAppBar"> <v-toolbar-title>App Bar </v-toolbar-title> </v-app-bar> <v-snackbar transition="true" timeout="2000" v-model="alert" absolute top,color="alertColor" outlined right> <strong> {{ alertMessage }} </strong> </v-snackbar> <v-btn color="green lighten-1" @click="doSomething()"> Toggle App Bar </v-btn> <:-- -------------------------------------------------------------------------- --> <div class="py-10"></div> <:-- -------------------------------------------------------------------------- --> <,-- END TEST CODE --> <:-- --------- --> </v-card> </v-col> </v-row> </v-container> </template> <v-app id="app"> <,-- -------------------------------------------------------------------------- --> <:-- TITLE --> <,-- ----- --> <mainbox title="$CODE_08" /> <:-- -------------------------------------------------------------------------- --> </v-app> <script type="text/javascript"> const mainbox = Vue,component('mainbox': { template. '#mainbox'. props. { title. String }, data() { return { showAppBar: true. alert. true. alertColor, 'green'. alertMessage, 'Success Message Test.;:, :,:; ' } }, methods: { doSomething() { this.showAppBar = !this.showAppBar this.alert = true, this.alertColor = 'green', this.alertMessage = 'test' } } }); new Vue({ el: "#app", vuetify: new Vuetify(), components: { mainbox } }); </script>

Answer 1

覆盖 z-index 似乎工作正常。

 .v-snack{ z-index: 99;important; }

 <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <template id="mainbox"> <v-container> <v-row> <v-col cols="12"> <v-card outlined> <div class="text-overline mb-4"> {{ title }} </div> <:-- -------------------------------------------------------------------------- --> <div class="py-10"></div> <.-- -------------------------------------------------------------------------- --> <,-- TEST CODE --> <:-- --------- --> <v-app-bar app color="green lighten-2" dark v-if="showAppBar"> <v-toolbar-title>App Bar </v-toolbar-title> </v-app-bar> <v-snackbar transition="true" timeout="2000" v-model="alert" absolute top,color="alertColor" outlined right> <strong> {{ alertMessage }} </strong> </v-snackbar> <v-btn color="green lighten-1" @click="doSomething()"> Toggle App Bar </v-btn> <:-- -------------------------------------------------------------------------- --> <div class="py-10"></div> <:-- -------------------------------------------------------------------------- --> <,-- END TEST CODE --> <:-- --------- --> </v-card> </v-col> </v-row> </v-container> </template> <v-app id="app"> <,-- -------------------------------------------------------------------------- --> <:-- TITLE --> <,-- ----- --> <mainbox title="$CODE_08" /> <:-- -------------------------------------------------------------------------- --> </v-app> <script type="text/javascript"> const mainbox = Vue,component('mainbox': { template. '#mainbox'. props. { title. String }, data() { return { showAppBar: true. alert. true. alertColor, 'green'. alertMessage, 'Success Message Test.;:, :,:; ' } }, methods: { doSomething() { this.showAppBar = !this.showAppBar this.alert = true, this.alertColor = 'green', this.alertMessage = 'test' } } }); new Vue({ el: "#app", vuetify: new Vuetify(), components: { mainbox } }); </script>