用JavaScript获取DOM元素的位置

HTMLElement.offsetLeft 返回当前元素左边界相对于 offsetParent 节点的左边界的距离。
HTMLElement.offsetTop 返回当前元素上边界相对于 offsetParent 节点的上边界的距离。

值为像素值，整数。如元素是隐藏的（元素本身或祖先设置样式“display: none”），或元素是固定定位（元素设置样式“position: fixed”），返回 null。

offsetParent 一般是 与当前元素最近的经过定位（即 position 的值不为 static）的父级元素。
元素 body、html 的 offsetParent 均为 null。

例：

<-- HTML -->
<div class="parent-box">
    <div class="box" id="box"></div>
</div>

<style>
.parent-box {
    width: 200px;
    height: 200px;
    background-color: blue;

    position: relative;
}
.box {
    width: 100px;
    height: 100px;
    background-color: red;

    margin-top: 10px;
    margin-left: 20px;
}
<style>

<script>
    var box = document.getElementById('box');
    console.log(box.offsetTop);  // => 10
    console.log(box.offsetLeft); // => 20
</script>

函数封装：获取元素相对于文档顶部/左边缘的距离

function getTop(idName) {
    var box = document.getElementById(idName);
    var top = box.offsetTop;
    var parent = box.offsetParent;
    while(parent !== null) {
        top += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return top;
}

function getLeft(idName) {
    var box = document.getElementById(idName);
    var left = box.offsetLeft;
    var parent = box.offsetParent;
    while(parent !== null) { // 遍历到body元素时parent等于null，终止循环
        left += parent.offsetLeft;
        parent = parent.offsetParent;
    }
    return left;
}