元素的偏移位置
<!DOCTYPE html>
<html lang="en" id="html">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
body{margin:0;}
#div1{width: 200px;height: 200px;background: #f00;padding:100px;margin:60px 0 0 60px;position: relative;}
#div2{width: 100px;height: 100px;background: #ff0;padding: 50px;position: relative;}
#div3{width: 100px;height: 100px;background: #ccc;position: relative;}
</style>
</head>
<body id="body">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<script>
var oDiv3=document.getElementById('div3');
console.log(oDiv3.offsetLeft);
console.log(oDiv3.offsetTop);
</script>
</body>
</html>