Element ui Message组件如何设置相对于底部的位置

官方的文档只给了相对顶部的偏移量，而且是用px做单位的，对于不同手机出现的位置都不一样，自己试了一下给出现的div加了bottom的样式并且加了!important但是出现的信息框直接变得很长

项目里面node_modules>element-ui>packages>message>src>main.js

刚才看了源码 58行开始

Message.close = function(id, userOnClose) {
  let len = instances.length;
  let index = -1;
  let removedHeight;
  for (let i = 0; i < len; i++) {
    if (id === instances[i].id) {
      removedHeight = instances[i].$el.offsetHeight;
      index = i;
      if (typeof userOnClose === 'function') {
        userOnClose(instances[i]);
      }
      instances.splice(i, 1);
      break;
    }
  }
  if (len <= 1 || index === -1 || index > instances.length - 1) return;
  for (let i = index; i < len - 1 ; i++) {
    let dom = instances[i].$el;
    dom.style['top'] =
      parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px';
  }
};

Message.closeAll = function() {
  for (let i = instances.length - 1; i >= 0; i--) {
    instances[i].close();
  }
};

意思大概是，点击多次会有一个移动的距离，就是很多个message 是往下排列的每次点击都会计算那个removeheight 如果你有设置X，点击X会关闭对应的message

下面属于我的猜测

本身组件有一个fixed定位，然后给的top默认是20，然后你再给个bottom 应为html是个松散型语言，你又给个顶部位移，还有底部位移，会不会在计算机看来就是给了个高度？

然后我做了一个测试，是一个纯html，没有框架的那种静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button style="position: fixed;top: 20px;bottom: 50px;">1111111</button>
<script>
   
</script>
</body>
</html>

就写了个button ，然后打开网页果然不出所料就是给了个高度

所以基本上就是在fixed的情况下，两者只能存在一个把

而且，源码是慢慢往下加高度的，你放在底下就是慢慢减高度的，还得去改源码。这种ui框架本来就是方便快速写代码的，这种提示类的，可以考虑换成样式，或者看看源码吧，有点晚了，源码我改不动了..

希望能帮到你

element的颗粒度没那么好，除非你大改，建议自己做一个组件，

let _this = this;
let m = new Promise(function (resolve) {
     _this.$message({
         message: "提示文字",
         center: true,
         customClass: "messagebottom"+_this.index,
	});
     resolve();
});
m.then(function () {
	let cl = document.getElementsByClassName("messagebottom"+_this.index)[0];
	let t = cl.style.top;
	cl.style.top = 'calc(100vh - '+(parseInt(t)+100)+'px)';
	_this.index++;
});