关于top、bottom、left、right为0垂直水平居中在element-ui Loading模块中的副作用

父元素: {
    position: relative;
}

子元素: {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 定宽;
    height: 定高;
    margin: auto;
}

以上是常用的给确定宽高的div垂直水平居中的方法。

一旦我们将子元素的宽高去掉，再加一个带透明度的background-color，那么这就是一个常用的蒙版，element-ui中的Loading加载就是这样实现的，上图+源代码：

v2.0.11

v1.4.13

相对于1.4.13版本，2.0.11版本在父元素的position: relative属性上加了一个！important，em……，这是因为如果父元素不是relative，而是absolute或者fixed的话，那么就会出现一下这种情况，例子1：

  <div class="box" v-loading="loading" :data="tableData">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <el-table style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>

.box {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

看到了吧，loading已经完全盖不上了，当父子元素都赋予定位脱离文档流的时候，子元素的top、bottom值就不拉伸自身宽度到父元素的实际高度了，更有趣的是同样是脱离文档流，当更改例1父元素的属性为float时，子元素依旧能很好的覆盖父元素：

.box {
  position: float;
  width: 100%;
  height: 100%;
  overflow: auto;
}

？

？？

？？？

好吧，我也不知道是什么原因，怀疑是继承父元素高度不同导致的，遇到这种情况的时候可以先记录下当前滚动条的位置，然后loading显示，loading隐藏后再恢复到之前记录的位置。至于是什么原因造成的区别，希望路过的大神能够指点迷津，感谢。