How can I display my snackbar display above(z-index) my app bar?

Question

I have this snack bar, it works perfectly, but it displays under a headerBar. Sometimes, I have to scroll up to see it. User will missed the important alert message, and don't know what is going on. I'm hoping to display it on top of all other components.

 <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

Overriding the z-index seems to work fine.

 .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>