记录Element Popover 弹出框 不会随浏览器变化

问题: element-ui中带有Popover弹框布局错位，不回随着浏览器窗口变化自动更新位置,查找了一堆文章后发现，element的Popover弹出框自适应位置变化，只有body开启 overflow:auto后，弹框位置会随着滚动条的变化而变化。

demo1 （body下的子元素开启滚动条）

• overflow:auto 设置给body下的元素 滚动scroll 弹框的定位是不回发生变化的，解决此问题 可以将弹框追加到父元素上（接下来就会发生demo2的问题）

demo2 （将弹框追加到父元素上）

• 追加到父元素上，会出现一个问题，如果当前弹框距离有边框间距较小的话，三级联动展示就不全，会被隐藏掉。

demo3 （自定义class解决层级展示问题）

• 给body开启overflow:auto属性，将弹出框追加到body上，给带有弹框出的元素添加一个自定义的class, 只要自定义的z-index 比navbar组件的z-index小即可解决问题。当然还有dialog弹出框也会出现问题，需要使用append-to-body 即可解决。

DemoList.vue

<el-cascader v-model="form.desc" :options="options" popper-class="custom-popper-class"></el-cascader>

index.css

.navbar {
  position: fixed;
  right: 0;
  top: 0;
  width: calc(100% - 236px);
  height: 50px;
  color: white;
  font-weight: bold;
  background-image: linear-gradient(45deg, red, green, transparent);
  z-index: 666;
}

.custom-popper-class{
  z-index: 665 !important;
}

demo地址：github.com/PeopleWhoLi…