js获取元素占位之offsetLeft、offsetTop用法

offsetLeft offsetTop

offsetLeft： 到定位父级左边界的间距。
offsetTop： 到定位父级上边界的间距。

规则

每一个标签对象，都有一个属性，叫 offsetParent ，表示这个标签的定位父级对象是谁。
我们先设定好标签的样式，下面规则中的demo都是在带有该样式的基础上更改或执行的：

*{
   
    margin: 0;
    padding: 0;
}
body{
   
    padding: 50px;
}
.div1{
   
    margin-left: 100px;
    position: fixed;
}
.div2{
   
    position: fixed;
}

1. 标签本身，没有定位属性，定位父级对象 是 body

此时是这个标签到body的间距 
不管是body的padding，还是标签的margin，都是到body的间距
如果有父级，计算的也是当前标签到 body 的总间距

实例（无父级）

<div class="div2">我是div</div>

<script>
    var oDiv = document.querySelector('.div2');
    // 定位父级是 body
    console.dir(oDiv);
</script>

实例（有父级）

<div class