left,right,top,bottom 속성

개요

position 속성을 static을 제외한 나머지 값 지정 시 위치정보(좌표)를 지정 할 수 있는데 이때 left, right, top, bottom 속성을 이용한다.

left는 문서 좌측부터 태그의 좌측 좌표 까지의 거리,

right는 문서 우측부터 태그 우측 좌표 까지의 거리,

top은 문서 상단부터 태그 상단 좌표 까지의 거리,

bottom은 문서 하단부터 태그 하단 좌표 까지의 거리를 의미한다.

left 값과 right 값은 반대되는 속성으로 두 값을 모두 지정해 버릴 경우 더 뒤쪽에 선언한 한가지 속성만 적용된다.

사용법

#box{ position:absolute; left:30px; top:100px; }

예제

<html>
<head>
<style>
	#box{ position:absolute; left:30px; top:100px; border:solid black 3px}
</style>
</head>
<body>
	<div id="box">왼쪽에서 30px, 위쪽에서 100px입니다.</div>
</body>
</html>
출력 결과:
왼쪽에서 30px, 위쪽에서 100px입니다.