问题1：el-message自定义样式不生效
想改弹出框的位置时不生效，使用了el-message的自定义类的custom-class属性也不行。原因应该是加了scoped后使用到里面样式的dom会添加data-v-xxxx这种属性防止css污染，但是message生成的dom是没有添加data-v-xxx属性的，所以样式无效。
解决方式：js动态设置（就是麻烦一点）
this.$message({
message:'登录失败',
center:true,
type:'error',
duration:0
});
var el=document.querySelector('.el-message');
if(el) el.style.cssText = 'margin-top: 60px;'我用的vue3+TypeScript
ElMessage({
showClose: true,
message: '登录成功',
type: 'success'
})
var el: any = document.querySelector('.el-message')
if (el) el.style.cssText = 'margin-top: 60px;'问题2：el-message被遮罩层挡住
在有半透明遮罩层的情况下触发message时其层级（z-index）在遮罩层之下
解决办法：在上面代码的基础上加z-index
ElMessage({
showClose: true,
message: '登录成功',
type: 'success'
})
var el: any = document.querySelector('.el-message')
if (el) {
el.style.cssText = 'margin-top: 60px;'
el.style.zIndex = 10000
}如果还是被遮罩层挡住很可能是父元素层级的问题，需要给父级加个z-index属性调整父元素层级，比如：文章来源：https://www.toymoban.com/news/detail-474366.html
<div style="z-index: 1">
<div style="z-index: 10">son</div>
</div>
<div style="z-index: 2"></div>
我的是A（父）组件包含了B（子）组件，给A的样式加了z-index小的值就可以了文章来源地址https://www.toymoban.com/news/detail-474366.html
到了这里，关于vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
