상대적 위치 지정은 일반적으로 나타나는 위치를 기준으로 HTML 요소의 위치를 변경합니다. 따라서 "left:20"은 요소의 LEFT 위치에 20픽셀을 추가합니다.
두 개의 값을 사용할 수 있습니다. 상단 그리고 왼쪽 위치 와 함께 HTML 문서의 아무 곳이나 HTML 요소를 이동하는 속성입니다.
- 왼쪽으로 이동 - 왼쪽에 음수 값 사용 .
- 오른쪽으로 이동 - 왼쪽으로 양수 값을 사용합니다.
- 위로 이동 - 상단에 음수 값을 사용합니다.
- 아래로 이동 - 상단에 양수 값을 사용합니다.
예시
상대 위치 지정을 구현하기 위해 다음 코드를 실행할 수 있습니다. -
<html> <head> </head> <body> <div style = "position:relative;left:80px;top:2px;background-color:yellow;"> This div has relative positioning. </div> </body> </html>