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="div1">
    <div class="div2">我是div</div>
</div>

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

2. 标签本身有定位，要看定位父级对象是谁

position: relative;    定位父级仍然是 body
position: absolute;    要看具体的定位是谁
position: fixed;       定位父级是 null 指的是 视窗窗口
表示的仍然是到定位父级的间距，只是定位父级有可能不同

实例1（标签本身position: relative + 父级无定位）

此时要更改样式：

.div1{
    margin-left: 100px;
}
.div2{
    position: relative;
}

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

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

实例2.1（标签本身position: absolute + 父级无定位）

更改样式：

.div1{
    margin-left: 100px;
}
.div2{
    position: absolute;
}

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

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

实例2.2（标签本身position: absolute + 父级position: relative）

更改样式：

.div1{
    margin-left: 100px;
    position: relative;
}
.div2{
    position: absolute;
}

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

<script>
    var oDiv = document.querySelector('.div2');
    // 定位父级变成了 div.div1
    console.dir(oDiv);
</script>

实例3（标签本身position: fixed + 不论父级有无定位）

更改样式：

.div1{
    margin-left: 100px;
    /* 不论有没有这个定位属性 */
    position: relative;
}
.div2{
    position: fixed;
}

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

<script>
    var oDiv = document.querySelector('.div2');
    // 定位父级都是视窗窗口，值为 null
    console.dir(oDiv);
</script>

3. 标签本身没有定位，父级有定位属性

此时定位对象父级是 带有定位属性的父级标签
表示的是到这个父级标签的间距

实例

更改样式：

.div1{
    margin-left: 100px;
    /* 不论是相对定位还是绝对定位等等 */
    position: relative;
}

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

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

总结

offsetLeft offsetTop 情况很复杂
需要先确定 offsetParent 定位父级对象标签
获取的数据，就是当前标签，到父级定位标签的总间距