.offsetLeft,.offsetTop

*{ margin:0; padding:0}
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green; }
#div3 {background: orange;}

<div id="div1">
  <div id="div2">
    <div id="div3"></div>
  </div>
</div>

<script> 
window.onload = function() {
var oDiv3 = document.getElementById('div3');
    alert( oDiv3.offsetTop );
}
</script>

offsetTop 

div3无定位父级则显示为到body的距离
火狐,谷歌，360,opera：80
ie7-11：80

offsetLeft

div3无定位父级则显示为到body的距离

火狐,谷歌，360,opera：100
ie7-11：100

 

*{ margin:0; padding:0}
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green;position:relative }
#div3 {background: orange;}

<div id="div1">
  <div id="div2">
    <div id="div3"></div>
  </div>
</div>

<script> 
window.onload = function() {
var oDiv3 = document.getElementById('div3');
    alert( oDiv3.offsetTop );
}
</script>

 

offsetTop

div3有定位父级则显示为到div2(父级)的距离
火狐,谷歌，360,opera：40
ie8-11：40
ie7：80 

offsetLeft

div3有定位父级则显示为到div2(父级)的距离

火狐,谷歌，360,opera：40
ie8-11：50
ie7：100如果自己没有定位，那么offsetLeft[Top]是到body的距离

*{ margin:0; padding:0}
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green;position: relative; }
#div3 {background: orange;position: relative;}

<div id="div1">
  <div id="div2">
    <div id="div3"></div>
  </div>
</div>

<script> 
window.onload = function() {
var oDiv3 = document.getElementById('div3');
    alert( oDiv3.offsetTop );
}
</script> 
div3有定位父级则显示为到div2(父级)的距离

offsetTop

火狐,谷歌，360,opera：40 
ie7-11：40 
ie7：如果自己没有定位，那么offsetTop是到body的距离 80 如果自己有定位，那么就是到定位父级的距离

offsetLeft

火狐,谷歌，360,opera：50 
ie7-11：50 
ie7：如果自己没有定位，那么offsetTop是到body的距离 100 如果自己有定位，那么就是到定位父级的距离