今天在开发过程中，突然收到一个BUG：

BUG截图

测试的意思是，此处的提示，太过于靠近顶部，导致用户可能忽略。让调整下位置，首先想到这种问题，应该组件有现成的配置项，就打开官方文档：Message | Element Plus (element-plus.org)

Element Plus官方文档

发现没有选项可以控制位置，于是打算通过自定义样式表去控制：

.el-message {top: 35% !important;}

运行，验证未通过，通过浏览器监控DOM变化，发现el-message的top是动态赋值的，并且有变化，应该是JS动态设置的。

仔细看文档，发现有appendTo这个选项，可以指定el-message追加到指定的容器，突发奇想，那是不是在DOM中放一个绝对定位的容器，指定appendTo到它即可，说干就干：

<div style="position: absolute;left: 0; top: 30%; zoom: 1;width: 375rem;">  <div ref="message-box" style="position: relative;"></div></div>

proxy.$message({  type: 'error',  message: res.message,  duration: 4000,  appendTo: proxy.$refs['message-box'],});

是不是觉得这样就OK了，错了，一运行，发现还是不对，他依旧我行我素的显示在原来的位置，一头雾水，无赖，只能把duration调大，调到1分钟以上，避免过快消失无法分析，通过DOM选择工具定位到el-message元素，仔细分析样式，发现他的样式是fixed的，也就是相对于浏览器窗口的，不受appendTo的约束，既然发现了问题，解决就容易了。

:deep(.el-message) {  position: absolute !important;}

解决成功截图