getBoundingClientRect（）方法使用案例

返回值

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合
前几天，实现一个需求，需要在输入框获得焦点之后弹出一个弹层。这里，需要特别注意的地方有：
（1）侧栏，它的爷爷是绝对定位，爸爸是相对定位，它自己，位置要放在其他的页面（各种定位）
（2）出现在弹窗的侧栏，跟（1）的场景像，但是因为弹窗所在的页面大小不一样，所以，还是有区别的。
文字解释不清楚，以下是对应上面两种场景的设计图：

（1）定位问题：嵌套层级太深了，所以，弹层的定位方式用position:absolute已经无法实现了，这里定位方式用fixed。
（2）要实现不同分辨率下，间距（红色圈出的地方）不能改变，这里需要进行一些计算。
弹层的样式：

.ez-filter-tip-aside-panel {
    box-sizing: border-box;
    position: fixed;
    height: auto;
    width: @ez-filter-tip-aside-panel-width;
    margin-top: 0.1em;
    color: @light-color;
    background-color: @ez-filter-tip-aside-panel-background-color;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    top: @ez-filter-tip-aside-panel-top;
    font-size: @font-size-small;
    z-index: @dropdown-z-index;
    box-shadow: 0 2px 8px  @filter-tip-aside-panel-box-shadow;
    height: @ez-filter-tip-aside-panel-height;
    padding: @widget-space;
  }

有了这段代码，可以实现弹层可以显示，但是，距离右侧的距离：
这里给出了计算方式：
找出弹层的父级元素的位置，然后减去弹层的宽度和它到爸爸的距离，就可以计算出来

        <div class="ez-filter-container" v-el:ez-filter-inpt-wrap :style="{width: width}" @click="showSelectPanel">
       <div class="ez-filter-tip-aside-panel" v-if="showRegAside" :style="{left: adaptionleft + 'px'}">
          <reg-instruction></reg-instruction>
      </div>
        regBoxWidth: 312,
      sideBarPadding: 24,
      let getBrowserLeft = this.$els.ezFilterInptWrap.getBoundingClientRect().x
      // console.log(this.$els.ezFilterInptWrap.getBoundingClientRect())
      this.adaptionleft = getBrowserLeft - this.sideBarPadding - this.regBoxWidth