top, left, bottom, right Property


Home > Document > CSS > Positioning > top, right, bottom, left

top, left, bottom, right Property

이 Property들은 자신이 담겨있는 Box 속에서의 top, left, bottom, right에서의 거리를 지정하는 Property들 입니다. body Tag에 직접 지정하면 top, left만 작동하고 bottom, right는 작동하지 않습니다. 하지만 body가 아닌 DIV같은 Box 속에 담겨있는 물체일 경우 top, left, bottom, right 모두 작동하며, length와 percentage 모두 사용 가능합니다.

  [표 보는 방법]
top, right, bottom, left Property
Value <length > | <percentage > | auto | Inherit
Initial auto
Applies to positioned elements
Inherited no
Percentages refer to height of containing block
Media Visual
HTML Syntax { top: sTop }
Scripting object.style.top [ = sTop ]





CSS Scripting
onMouseOver="this.style.top='50px';"

아래의 예제는 가로, 세로 100pixel 크기의 Box를 widht 100%, height 400pixel 크기의 DIV Box 속에 넣고 top, left, bottom, right를 각각 50pixel 씩 띄운 예제입니다.

출력결과
bottom:50px; right:50px;
top:50px; right:50px;
bottom:50px; left:50px;
top:50px; left:50px;


소스 보기




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색