朋友们。开发中遇到了一个关于Message与MessageBox遮挡的问题，我点击按钮，弹出MessageBox并且出现Message提示，但是现在Message提示被MessageBox挡住了，怎么提高Message的层级啊？
我想弹框正常出现，并且可以看到Message提示消息，有什么好的建议吗？谢谢大家。
关于element Message消息提示与MessageBox弹框遮挡问题
- 写回答
- 好问题 0 提建议
- 关注问题
分享- 邀请回答
-
3条回答 默认 最新
whicce 2021-10-08 16:53关注
给message组件添加一个z-index属性值大一点的样式类本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报 分享
- 2022-03-14 15:52RayShyy的博客 但是呢，message总是会被dialog弹框遮挡，如下： 小shy初步判断应该是跟层叠顺序z-index有关，百度一查，果不其然，哈哈。 解决方法如下： 将message的z-index的值比dialog的大就好了（dialog的z-index的值是两千多...
- 2022-12-26 16:54W2andye的博客 原因：element ui 默认给$message消息弹框动态添加的z-index值比对dialog小，可控制台具体查看。2、给message设置自定义样式customClass，将z-index设为3000。1、dialog增加属性：z-index=“1000”
- 2022-04-19 09:47_Hhao_的博客 message提示信息 提升到当前页面最高
- 2024-03-13 14:11Gnined的博客 通过右侧的样式警告信息，发现是因为没有设置position导致z-index不生效（position默认为static）那么解决办法就很简单了 直接给messagebox加上position: relative;通过审查元素发现z-index是足够高的。
- 2022-01-27 21:48朝阳39的博客 element UI默认给$message消息弹框动态添加的z-index值比对话框小 解决方案 给 $message 添加自定义样式 this.$message({ message: "我是消息", customClass: "myMessageClass" }); 划重点：必须是全局style，不...
- 2021-08-09 11:44weixin_54362826的博客 页面一打开就有一个提醒修改密码的弹框,如果这时候再有其他 messageBox 弹框的时候就会被覆盖,形成多个弹框排队等着处理的效果,第一个弹框永远在最前面,不能及时处理消息 分析 ElementUI 的组件是挂载在 Vue 上的,...
- 2019-09-04 14:23chen子健的博客 element-ui中，当在嵌套的Dialog对话框中使用Message消息提示的时候，会出现消息提示被Dialog对话框遮罩而看不到消息提示的情况。 原因分析 Message消息提示和Dialog对话框本质上都是弹窗，出现遮罩的问题，是二者...
- 2022-07-11 10:31楠北的博客 Message的消息弹框显示被el-dialog覆盖
- 2025-12-19 14:53混世洁癖大魔王的博客 针对 ElementPlus 中 MessageBox 弹窗被 el-table 遮挡的问题，分析其核心成因是 z-index 层级冲突。给出的解决方案为在全局样式文件中添加.is-message-box { position: relative; z-index: 9999; }样式，同时说明该...
- 2022-04-28 21:18全栈小定的博客 出现这种情况的原因是因为消息弹窗的层级z-index比对话框低导致的，消息弹窗的z-index一般在2001，而对话框的z-index在3000左右。 解决思路很简单，我们只要把对话框的z-index降低即可，让它显示在消息弹窗下面，...
- 2025-06-21 11:37嘿嘿码字的博客 vue3，解决element plus message不显示，vue3 element plus ElMessage引入无效或不显示 样式报错，Vue3使用Element-plus按需加载时消息弹框ElMessage没有样式，浏览器不报错也不显示，使用element-plus中的ElMessage...
- 2022-08-22 19:00不想打工的打工人的博客 还有假设赋值了也不行的话 设置 :modal-append-to-body="false"必须要给二级弹窗赋 :append-to-body="true"自己在实际开发中碰到了这个问题 希望对你有所帮助。打开element认真看多层嵌套。
- 2022-07-22 15:13i_da_bai的博客 解决弹窗内容被遮罩遮住、弹窗层级样式不够问题 情况一：弹窗层级样式不够。elementui文档上，Message板块有写到可以提供自定义class。通过自己设置类名，可以对其设置相关css属性。 情况二： 弹窗内容被遮罩遮住。
- 2019-02-13 14:55过去式的美好的博客 最近碰到一个先执行this.$message提示内容，然后接着弹出dialog带遮罩层弹框。那么问题来了，message提示框会默认被dialog遮罩层挡住，现在就是要解决这个问题。 由于都是弹框，问题肯定是出在z-index比重问题。由于...
- 2021-08-06 14:26qq_38969618的博客 设置el-message的z-index为更大值即可。或设置el-dialog的z-index为较小值即可。
- 2023-03-12 20:35M31Gargantua的博客 vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）
- 2022-03-29 10:35十月ooOO的博客 如何全局设置element-ui message 的一些参数 参考：https://www.cnblogs.com/morango/p/15349415.html 比如为了不遮挡内容，我需要修改 message 的默认距离顶端的距离为 offset: 100 // ELEMENT UI import ...
- 2024-03-22 14:49weixin_54820790的博客 主要原因是全屏之后message是在body下的，而组件全屏之后是不在body中。在components中新建一个文件夹messageBox。在你需要使用message的文件中引入组件。解决方法是自己封装一个message。
- 2023-01-16 17:12True_story的博客 【代码】element对话框遮罩层和弹出内容样式优先级错误。
- 没有解决我的问题, 去提问
问题事件
系统已结题
10月17日
已采纳回答
10月9日-
创建了问题
10月8日