VueJS中SweetAlert2 Toast被导航栏遮挡，z-index设置无效

在VueJS项目中使用SweetAlert2的Toast提示框时，Toast会浮在导航栏后方，尝试设置z-index属性未生效。调用代码如下：

showSuccessAlert() {
    Toast.fire({
        icon: 'success',
        title: 'Product added successfully to cart',
    })
}

解决方法： #

• 全局覆盖SweetAlert2 Toast样式
  在项目全局CSS文件（如App.vue的<style>或global.css）中添加：

  .swal2-toast {
      z-index: 9999 !important; /* 数值需大于导航栏的z-index */
  }
  

  加!important是为了强制覆盖SweetAlert2默认样式的优先级。

• 初始化插件时自定义容器类
  若通过VueSweetalert2插件引入，可在main.js初始化时指定自定义类：

  import VueSweetalert2 from 'vue-sweetalert2';
  import 'sweetalert2/dist/sweetalert2.min.css';
  
  const options = {
      customClass: {
          container: 'custom-toast-container'
      }
  };
  
  Vue.use(VueSweetalert2, options);
  

  再在全局CSS中设置：

  .custom-toast-container {
      z-index: 9999 !important;
  }
  

• 确认导航栏z-index值
  先通过浏览器开发者工具查看导航栏的z-index数值，确保Toast的z-index比它更大即可。

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