关于 element plus 中 ElmessageBox 组件在左下角显示的解决方法。

在 进行毕业设计的开发时，使用 element  plus 组件库时，遇到了一个问题：

 ElmessageBox 消息弹出框，弹出并显示在页面的左下角。

原因一：组件的层级太低，可以提高组件的层级。

这是可能部分人可以通过，使用组件自带的类名，设置 z-index 值的更改提高层级。也可以通过 customClass 来添加自定义类名来设置 z-index 值提高层级。

添加自定义类名：

ElMessageBox.confirm('你确认退出吗？', '温馨提示', {

      type: 'warning',

      confirmButtonText: '确认',

      cancelButtonText: '取消',

      customClass: 'my-messagebox' // 添加自定义类名

    })

---

CSS 样式中：

.my-messagebox .el-messagebox__body {

  z-index: 3002 !important;

}

（我个人使用这个方法，行不通。）

---

原因二：组件相关的 CSS 样式文件没有正确引入。

可以通过以下代码引入：

import "element-plus/theme-chalk/el-loading.css";

import "element-plus/theme-chalk/el-message.css";

import "element-plus/theme-chalk/el-notification.css";

import "element-plus/theme-chalk/el-message-box.css";

import "element-plus/theme-chalk/el-drawer.css";

---

我是通过该方法解决的，请大家进行补充。