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>