時間をかけてtop、postop、scrolltop、scrollHeight、offsetHeightを明らかにします

1. top
このアトリビュートは、オブジェクトの位置(position)アトリビュートが設定されている場合にのみ使用できます.そうでない場合、このプロパティ設定は無視されます.

<div style="background-color:red; position:absolute; width:100px; height:100px;">
<p style="background-color:silver; position:absolute; top:-5px;">  top</p>
</div>

上の段落Pは1つのDIVに含まれており、Pのtopが-5 pxに設定されていることがわかります.その上辺距離は容器DIVの上辺距離を超えており、この距離を超えると5 pxに設定されています.
なお、DIVとPのペアには要素が含まれており、親要素が設定されていない場合、サブ要素の参照はドキュメント全体にわたってpositionが定義された要素であるまでpositionをabsoluteに設定する必要があります.
2. posTop
posTopの数値は実はtopと同じですが、違いは、
topは要素単位pxを固定しているが、posTopは数値にすぎない(これはalert(「top=」+id.style.top)とalert(「posTop=」+id.style.posTop)で証明できるため、posTopを使用して演算されるのが一般的である.

<div style="background-color:red; position:absolute; width:100px; height:100px;">
<p id="test" style="background-color:silver; position:absolute;">  posTop</p>
</div>
<script>
test.style.posTop = 15+8;
alert("top="+test.style.top);
alert("posTop="+test.style.posTop);
</script>

topまたはposTopを使用して値を割り当てても、最後の結果は一致します.
3. scrollTop

<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red;">
                                            </p>
</div>
<script>
container.scrollTop = 12;
</script>

このテキストはこの100*100のDIV内では完全に表示できないので、設定しました
overflowはautoで、id.scrollTopプロパティが設定されていない場合、上下方向のスライドボックスが表示されます.
スライダの位置は既定では一番上にあります.そして
scrollTop値を12に設定すると、スライダの位置が変わり、デフォルトでは12画素のテキストが巻き上げられます.overflowをhiddenに設定すると、上部の12画素のテキストは表示されません.
注意id.styleではなくid.scrollTopを設定します.scrollTop.
4.scrollHeightとoffsetHeight
offsetHeightは自己要素の高さ、scrollHeightは自己要素の高さ+非表示要素の高さです.

<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red; height:250px; ">
                                            </p>
</div>
<script>
alert(container.offsetHeight);
alert(container.scrollHeight);
</script>

100250が順次出力されます.要素のheightが100 pxと指定されているため、offsetHeightは常に100 pxである.内部要素は250 pxで、容器要素は100 pxしかないので、150 pxの内容は表示できませんが、実際には存在しますので、scrollHeight値は100+150=250です.
http://www.cnblogs.com/hushuan/articles/625543.html