1.top
此属性仅仅在对象的定位（Position）属性被设置时可用。否则，此属性设置会被忽略。
java代码：
<div style="background-color:red;position:absolute;100px;height:100px;">
<p style="background-color:silver;position:absolute;top:-5px;">测试top</p>
</div>
上面是一个段落P包含在一个DIV内，可以看到P的top设置为-5px后，它的上边距超过了容易DIV的上边缘，超过的这段距离就是设置的5px。
需要注意的是，DIV和P这一对包含元素，都需要设置position为absolutely才能得到想要的结果，假如父元素不设置，则子元素的参照将是更上一层定义过的position的元素，直到整个文档。
2.posTop
posTop的数值其实和top一样，区别在于，top固定了元素单位为px，而posTop只是一个数值（这一点可以通过alert("top="+id.style.top)和alert("posTop="+id.style.posTop) 来证明），因此在运算的时候一般都使用posTop。
java代码：
<div style="background-color:red;position:absolute;100px;heigt:100px;">
<p id="test" style="background-color:sliver;position:absolute;">测试posTop</p>
</div>
<script>
test.style.posTop = 15+8;
alert("top="+test.style.top);
alert("posTop="+test.style.posTop);
</script>
无论你使用top还是posTop来赋值，结果都是一样的，差别就在于posTop后面不用带px，便于参与运算。
3.scrollTop
java代码
<div id="container" style="background-color:sliver;100px;height:100px;overflow:auto;">
<p style="backgroud-color:red;">
别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎</p>
</div>
<script>
container.scrollTop = 12;
</script>
这一段文本在这个100*100的DIV内无法完全显示，所以设置了overflow为auto，它会出现一个上下方向的滑动框，假如没有设置id.scrollTop属性的话，默认情况下滑块位置在顶端。而设置了scrollTop值为12后，滑块的位置改变了，默认显示的是卷过了12个像素的文本。如果设置overflow为hidden，则将无法显示顶部12个像素的文本。
备注：顺便介绍一下overflow，overflow从字面意义上讲就是溢出的意思。例如：你有个层，但是里面的内容（图片或是文字）要比层大，overflow就是针对这种情况进行处理的。
overflow包含四个属性值：visible,hidden,auto,scroll
visible 就是超出的内容仍然正常被显示出来。
hidden 就是超出的内容被隐藏。
auto 是默认值，根据内容进行剪切或者加滚动条。
scrollTop就总是加滚动条。
4.offsetHeight与scrollHeight
offsetHeight是元素自身高度，如下例中container.offsetHeight为DIV元素的高度；scrollHeight是元素自身高度+隐藏元素的高度，来解释scrollHeight，如下例中元素P由于高度大于元素DIV，在加载页面的时候分为两部分，一部分在DIV元素中显示出来，另一部分由于DIV高度限制，无法显示（可拖动滑动条显示），这无法显示的部分高度就是隐藏元素的高度。
<div id="container" style="background-color:silver;100xp;height:100px;overflow:auto;">
<p style="background-color:red;height:250px">
别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎</p>
</div>
<script>
alert(container.offsetHeight);
alert(container.scrollHeitht);
</script>
结果，在加载网页的时候将输出100，250。因为已经指定DIV元素（id="container"）的height属性为100px，所以offsetHeight始终为100；内部元素P的height属性为250px，而作为容器元素的DIV（id="container"） 高度只有100px，这样元素P就还有150px无法显示，但它实际是存在的，所以scrollHeight值为100+150=250。