看着实在是好晕，于是各种整理后手动画了一个：
发现主要分为几部分：
当定位时，position的移动的距离，
scrollHeight:文档总高度，可滚动总高度（包含元素本身，内外边距，边框）
scrollWidth:文档总宽度，可滚动总宽度（包含元素本身，内外边距，边框）
scrollTop:相对于滚动条顶部的偏移，指滚动条顶端与当前滚动条位置的距离
scrollLeft:相当于滚动与左端的偏移
clientHeight:可视区域高度（不包含边框，滚动条）
clientWidth:可视区域宽度
clientTop:内容区域相对于整个元素的左上角，当有边距时为边距的厚度，无边距时可以为0
clientLeft:内容区域相对于整个区域的左上角，有边距时为边距的宽度，可以为0
offsetHeight:获取自身元素（包含边距，滚动条）
offsetWidth:获取自身元素（包含边距，滚动条）
offsetTop:相对于最近定位祖元素的偏移，（祖元素必须是position,relative,absloute,fixed）
offsetLeft:同offsetTop
返回第一个祖定位元素，若父级元素无定位返回body,若父级元素已经定位返回相对应父级对应元素。
你好，原生的写法是这样的
<html><head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<style>
*,body{padding:0 margin:0}
.div{position:absolute left:0px top:50px width:50px height:50px background-color:#006}
</style>
</head>
<body>
<div class="div" id="obj"></div>
<script type="text/javascript">
var obj = document.getElementById("obj")
alert(obj.offsetTop)
</script>
</body>
</html>
希望可以帮助到你
屏幕顶端的距离网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）
(javascript)document.documentElement.scrollTop //firefox
(javascript)document.documentElement.scrollLeft //firefox
(javascript)document.body.scrollTop //IE
(javascript)document.body.scrollLeft //IE
(jqurey) $(window).scrollTop()
(jqurey) $(window).scrollLeft()
网页工作区域的高度和宽度
(javascript) document.documentElement.clientHeight// IE firefox
(jqurey) $(window).height()
元素距离文档顶端和左边的偏移值
(javascript)DOM元素对象.offsetTop //IE firefox
(javascript)DOM元素对象.offsetLeft //IE firefox
(jqurey) jq对象.offset().top
(jqurey) jq对象.offset().left
