js

1. 默认有8px的margin！与边框无关
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{padding: 40px 50px; border: 10px solid gray}
        #div1{position: relative; background-color: red}
        #div2{position: relative; background-color: green}
        #div3{position: relative; background-color: orange}
    </style>
</head>
<body id="body1">
<div id="div1">
    <div id="div2">
        <div id="div3">

        </div>
    </div>
</div>
<script>
    window.onload = function () {
        var oDiv3 = document.getElementById('div3')
        var p = getPos(oDiv3);
        console.log(p.left + ":" + p.top); //108 88

        function getPos(obj) {
            var pos = {left : 0, top : 0};
            while(obj){
                pos.left += obj.offsetLeft;
                pos.top += obj.offsetTop;
                obj = obj.offsetParent;
            }
            return pos;
        }
    }
</script>
</body>
</html>