페이지 위치 top,postop,scrolltop,offsetTop,scrollHeight,offsetHeight,clientHeight

1.top
이 속성은 대상의 위치(position) 속성이 설정되었을 때만 사용할 수 있습니다.그렇지 않으면 이 속성 설정이 무시됩니다.

<span style="font-size:18px;"><strong><span style="color:#6633FF;"><div style="background-color:red; position:absolute; width:100px; height:100px;">
<p style="background-color:silver; position:absolute; top:-5px;">  top</p>
</div> </span></strong></span>

위에 있는 단락 P는 하나의 DIV에 포함되어 있습니다. P의 top가 -5px로 설정된 것을 볼 수 있습니다. 이 단락의 위 간격은 용기 DIV의 위 간격을 초과했습니다. 초과된 이 간격은 설정된 5px입니다.주의해야 할 것은 DIV와 P라는 요소를 포함하는position을 absolute로 설정해야만 원하는 결과를 얻을 수 있다. 만약에 부모 요소가 설정하지 않으면 하위 요소의 참조는 전체 문서까지 더 상층부에서 정의한position 요소가 될 것이다.
2.posTop
posTop의 수치는 사실 top와 같지만 차이점은 top는 원소 단위를 px로 고정시켰고posTop은 하나의 수치일 뿐이며 보통posTop으로 연산한다.
3.scrollTop

<span style="font-size:18px;"><strong><span style="color:#3366FF;"><div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red;" mce_style="background-color:red;">
     
</p>
</div>
<script type="text/javascript"><!--
container.scrollTop = 12;
// --></script></span></strong></span>

이 텍스트는 이 100*100의 DIV에서 완전히 표시할 수 없기 때문에 오버플로우를 auto로 설정하면 위아래 방향의 슬라이딩 상자가 나타납니다. 만약 id.scrollTop 속성을 설정하지 않았다면 기본적으로 슬라이더 위치는 맨 위에 있습니다.scrollTop 값이 12로 설정된 후 슬라이더의 위치가 바뀌었습니다. 기본적으로 12개의 화소를 말아 올린 텍스트가 표시됩니다.오버플로우를hidden으로 설정하면 맨 위에 있는 12개의 화소 텍스트를 표시할 수 없습니다.설정 방식은 id.scrollTop이지 id.style이 아닙니다.scrollTop.
4.offsetTop
요소 A가 HTML의 body 요소인 경우 디스플레이 속성 계산 값이 none이거나 CSS 레이아웃 상자가 없으면 0을 반환하고 이 알고리즘을 중지합니다.만약 요소 A의 offsetParent가null 또는 HTML의 바디 요소라면, CSS 픽셀 단위로 요소 A의 상단 상자가 캔버스 원점의 수직 거리를 되돌려주고 이 알고리즘을 정지합니다.CSS 픽셀 단위로 원소 A 상단 상자의offsetParent 상단 경계 거리를 되돌려줍니다
5.scrollHeight와offsetHeight,clientHeight
clientHeight 여러분은 clientHeight에 대해 이의가 없습니다. 모두 내용을 볼 수 있는 구역의 높이라고 생각합니다. 즉, 페이지 브라우저에서 내용을 볼 수 있는 이 구역의 높이는 보통 마지막 도구막대 아래에서 상태막대 이상까지의 이 구역으로 페이지 내용과 무관합니다.offsetHeight IE, Opera는 offsetHeight = clientHeight + 스크롤 바 + 테두리를NS, FF는 오프셋 하이라이트가 웹 콘텐츠의 실제 높이로 client Height보다 작을 수 있다고 주장했다.scroll Height IE, Opera는 scroll Height가 웹 콘텐츠의 실제 높이로 client Height보다 작을 수 있다고 생각한다.NS, FF는 scroll Height가 웹 페이지의 내용 높이라고 생각하지만 최소값은client Height이다
HTML 컨트롤에 대한 offsetHeight는 자체 요소의 높이이고, scrollHeight는 자체 요소의 높이 + 숨겨진 요소의 높이입니다.

<font size="4"><font color="#FF0000" size="3"><span style="color:#000000;"><span style="font-size:18px;"><strong><span style="color:#6633FF;"><div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red; height:250px; ">
                                            </p>
</div>
<script type="text/javascript"><!--
alert(container.offsetHeight);
alert(container.scrollHeight);
// --></script> </span></strong></span></span></font></font>

100250씩 출력됩니다.원소의 Height가 100px로 지정되었기 때문에offsetHeight는 시종 100px입니다.내부 원소는 250px이고 용기 원소는 100px에 불과하다면 150px의 내용도 표시할 수 없지만 실제 존재하기 때문에 scroll Height 값은 100+150=250이다.