1、top：（在设置了定位（position）后该属性才生效。）从下面的代码和效果可以看到，div和p元素都设置了position后，p相对于其父元素div有10px的高度。
2、posTop：posTop其实跟top是相同的，区别在于top固定了元素单位为px，而posTop只是一个数值。（FF没有该属性）
<div style="background:pink;width:100px;height:100px;position:absolute;margin:20px">
<p id="p1"
style="background:green;width:50px;height:50px;position:absolute;"></p>
</div>
<script type="text/javascript">
p1.style.posTop =
20;
alert("top:" + p1.style.top + ";" + "posTop:" +
p1.style.posTop);
</sctipt>
3、offsetHeight scrollHeight : offsetHeight是自身元素的高度，scrollHeight是自身高度+被隐藏的高度。
<div
style="background:pink;width:350px;height:200px;position:absolute;margin:20px;overflow:auto"
id="content">
<p style="height:500px;white-space:pre;">
最怕空气突然安静
最怕朋友突然的关心
最怕回忆突然翻滚绞痛着不平息
最怕突然听到你的消息
想念如果会有声音
不愿那是悲伤的哭泣
事到如今终于让自己属于我自己
只剩眼泪还骗不过自己
突然好想你你会在哪里
过得快乐或委屈
突然好想你突然锋利的回忆
突然模糊的眼睛
我们像一首最美丽的歌曲
变成两部悲伤的电影
为什么你带我走过最难忘的旅行
然后留下最痛的纪念品
</p>
</div>
<script>alert("offsetHeight:"
+ content.offsetHeight + " ; " + "scrlloHeight:" +
content.scrollHeight);</script>
4、scrollTop:由于文本大于盒子，无法完全显示，在设置了overflow:auto后，出现滚动条，默认情况下滚动条位置在顶端（如上图），设置了id.scrollTop后，其位置改变。
<script>content.scrollTop
= 100;</script>
top/posTop/scrollHeight/offsetHeight/scrollTop的区别【2012/08/04】,布布扣,bubuko.com
top/posTop/scrollHeight/offsetHeight/scrollTop的区别【2012/08/04】
原文：http://www.cnblogs.com/zhengyingyan/p/3627218.html