offsetTop的计算判断，父级与自身修改position时原点的位置判断及pandding造成的影响

首先知道 offsetTop 和 offsetLeft 的计算判断

• 实例控制，先说结论（复制代码可打印（vue））
  1. 自身不使用position： 自身margin
     • 代码解释：offsetTop和offsetLeft 计算了dom 自身的 margin，不计算padding
  2. 自身使用position: relative： 自身margin + 自身top/left
     • 代码解释：offsetTop和offsetLeft 计算了 dom自身 配置了 position: relative; 的 top 和 left，且top和margin并用时，top置于margin外层，自身的top:10和margin-top:20，加上dom1和dom2所占据的110，所以offsetTop为140
  3. 父级使用relative，自身使用absolute： 自身margin + (自身top/left ? 自身top/left : 父级padding)
     • 代码解释：自身top：15 加上自身marign：20（父级设置 position：relative 下的offsetTop 的原点是父级 左 上角，如果自身没有设置top/left，则offsetTop 会 计算父级的padding，不算父级top，如果自身存在 left和top，则offsetTop 不会 计算padding和父级top的距离）））
  4. 父级使用absolute，自身不使用position： 父级内容高度 + 父级pandding + 自身margin
     • 代码解释：父级存在 postion，不计算父级的top和margin，48是因为文字高度18px，有20是自己的margin，10是父级的padding（父级设置 position：absolute 下的offsetTop 的原点是父级的左上角，padding的起始位置，因为padding占据了距离，所以自己的offsetTop会计算父级padding的距离）

<template>
  <div class="App pageWrapper">
    <div class="class1">1</div>

    <div class="class2">2</div>

    <div class="class3">
      3
      <div class="class4">
        4
        <div class="class5">5</div>
      </div>
    </div>

    <el-button type="primary" style="position: fixed; bottom: 10px; right: 10px" @click="test">获取</el-button>
  </div>
</template>
<script>
export default {
  methods: {
    test() {
      console.log('token')
      const dom1 = document.querySelector('.class1')
      const dom2 = document.querySelector('.class2')
      const dom3 = document.querySelector('.class3')
      const dom4 = document.querySelector('.class4')
      const dom5 = document.querySelector('.class5')
      this.getLocal(dom1) // --> offsettop/offetLeft: 20 20 (offsetTop和offsetLeft 计算了dom 的margin，不计算padding)
      this.getLocal(dom2) // --> offsettop/offetLeft: 70 0
      this.getLocal(dom3) // --> offsettop/offetLeft: 140 30 (offsetTop和offsetLeft 计算了 dom自身 配置了 position: relative; 的 top 和 left，且top和margin并用时，top置于margin外层，自身的top:10和margin-top:20，加上dom1和dom2的所占据110，所以offsetTop为140)
      this.getLocal(dom4) // --> offsettop/offetLeft: 35 35（自身top：15 加上自身marign：20（父级设置 position：relative 下的offsetTop 的原点是父级左上角，如果自身没有设置top/left，则offsetTop会计算父级的padding，不算父级top，如果自身存在left和top，则offsetTop不会计算padding和父级top的距离）））
      this.getLocal(dom5) // --> 父级存在 postion，不计算父级的top和margin，48是因为文字高度18px，有20是自己的margin，10是父级的padding（父级设置 position：absolute 下的offsetTop 的原点是父级的左上角，padding的起始位置，因为padding占据了距离，所以自己的offsetTop会计算父级padding的距离）
      console.log('end ----------------------------------------------')
    },
    getLocal(dom) {
      console.log(dom)
      console.log(dom.offsetTop, dom.offsetLeft)
      const rect = dom.getBoundingClientRect()
      console.log('rect', rect)
    },
  },
}
</script>
<style lang="scss" scoped>
.pageWrapper {
  position: relative;
  background: #eee;
  overflow: auto;
}
.class1 {
  margin: 20px;
  height: 30px;
}
.class2 {
  padding: 10px;
  height: 40px;
}
.class3 {
  padding: 10px;
  margin: 20px;
  position: relative;
  top: 10px;
  left: 10px;
}
.class4 {
  margin: 20px;
  padding: 10px;
  position: absolute;
  top: 15px;
  left: 15px;
  line-height: 18px;
}
.class5 {
  margin: 20px;
  padding: 10px;
}
</style>

• 代码运行效果图