CSS의 상대 위치 지정(relative positioning)은 HTML 요소를 원래 자연스럽게 배치되는 위치를 기준으로 이동시키는 방식입니다. 예를 들어 left:20px를 적용하면 요소가 원래 위치에서 왼쪽 기준으로 20픽셀 이동합니다.
top과 left 속성으로 요소 이동하기
position: relative; 속성과 함께 top과 left 두 값을 사용하면 HTML 문서 내 어느 곳이든 요소를 자유롭게 배치할 수 있습니다.
- 왼쪽으로 이동 —
left에 음수 값을 사용합니다. - 오른쪽으로 이동 —
left에 양수 값을 사용합니다. - 위로 이동 —
top에 음수 값을 사용합니다. - 아래로 이동 —
top에 양수 값을 사용합니다.
예제 코드
아래 코드를 실행하면 상대 위치 지정이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<html> <head> </head> <body> <div style = "position:relative;left:80px;top:2px;background-color:yellow;"> This div has relative positioning. </div> </body> </html>
이 예제에서 div 요소는 원래 위치에서 오른쪽으로 80픽셀, 아래로 2픽셀 이동하여 표시됩니다. 배경색을 노란색으로 지정했기 때문에 요소가 실제로 이동한 것을 눈으로 쉽게 확인할 수 있습니다.
참고 사항
상대 위치 지정은 요소를 이동시키더라도 원래 차지하던 공간은 그대로 유지된다는 점이 특징입니다. 따라서 주변 요소들의 레이아웃에는 영향을 주지 않으면서 특정 요소만 미세하게 조정하고 싶을 때 유용하게 활용할 수 있습니다.