문서의 계통도에서 다음에 위치된 개체의 아래쪽에 상대적인 개체의 아래쪽 위치를 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 너비(두께)를 나타내는 문자열이다.

auto 디폴트이며, 보통의 HTML 문서의 배치에따른 디폴트 위치이다.
(길이) 부동소수점수치 다음에 cm, mm, in, pt, pcpx 등 길이 단위가 따르는 절대 길이, 혹은 em or ex 등의 단위가 따르는 상대 길이이다. CSS 길이단위를 참조하라.
(백분율) 정수값에 백분율 기호(%)를 붙인 것이다. 이 값은 모체의 높이에 대한 상대적인 백분율값이다t.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 auto이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

position 애트리뷰트가 설정된 경우에만 bottom 애트리뷰트를 사용할 수 있다. 그렇지 않으면 bottom 애트리뷰트는 무시된다.

bottom 속성값이 문자열이므로, 스크립트로 문서에서 개체의 위치를 계산하는데 이 속성을 사용할 수 없다. 대신 pixelBottom이나 posBottom 속성을 사용하라.

적용
개체scriptCSS IE 버전
참조
pixelTop pixelBottom pixelLeft pixelRight posTop posBottom posLeft posRight
top bottom left right

이 속성은 CSS2(Cascading Style Sheets Level 2)에 정의되었다.


결과 표시창

onmouseoveronmouseout 이벤트로 위치를 조정한다.

<SCRIPT>
function showPos(){
  str='divObj.style.top=<FONT color=blue>'+divObj.style.top+'</FONT><BR>';
  str+='divObj.style.bottom=<FONT color=blue>'+divObj.style.bottom+'</FONT><BR>';
  str+='divObj.style.left=<FONT color=blue>'+divObj.style.left+'</FONT><BR>';
  str+='divObj.style.right=<FONT color=blue>'+divObj.style.right+'</FONT><BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<DIV id="container" style="border:solid 1 blue;background-color:ffd;height:200;width:500">
<IMG id="divObj"  style="position:relative;top:30px;bottom:40;left:50;right:20" src="../../gif/flower.jpg" width=200
  onmouseover="this.style.top='60';this.style.bottom='80';this.style.left='100';this.style.right='60';showPos()"
  onmouseout="this.style.top='10';this.style.bottom='40';this.style.left='50';this.style.right='20';showPos()">
</DIV>
<SCRIPT>
str='divObj.style.position='+divObj.style.position+'<BR>';
str+='divObj.style.top='+divObj.style.top+'<BR>';
str+='divObj.style.bottom='+divObj.style.bottom+'<BR>';
str+='divObj.style.left='+divObj.style.left+'<BR>';
str+='divObj.style.pixelTop='+divObj.style.pixelTop+'<BR>';
str+='divObj.style.pixelLeft='+divObj.style.pixelLeft+'<BR>';
str+='divObj.style.posTop='+divObj.style.posTop+'<BR>';
str+='divObj.style.posLeft='+divObj.style.posLeft+'<BR>';
document.write(str);
</SCRIPT>
<DIV id=showA>결과 표시창</DIV>