CSS 상대 위치 지정이란?
상대 위치 지정(relative positioning)은 요소를 자신의 원래 위치를 기준으로 이동시키는 CSS 배치 방식입니다. 요소는 문서의 일반적인 흐름(normal flow)에서 차지하던 공간을 그대로 유지한 채, 그 위치로부터 상대적인 오프셋이 적용됩니다.
상대 위치를 적용하려면 position: relative 속성을 사용합니다. 이후 top, right, bottom, left 속성을 함께 지정하면 원래 위치를 기준으로 요소가 원하는 방향으로 이동합니다.
주요 특징
- 요소가 원래 차지하던 공간은 그대로 유지되므로, 주변 요소의 레이아웃에는 영향을 주지 않습니다.
top,right,bottom,left값으로 원래 위치에서 얼마나 이동할지 결정할 수 있습니다.- 절대 위치(
position: absolute) 요소의 기준점이 되는 컨테이닝 블록으로 자주 활용됩니다.
예제
다음 예제는 div 요소에 position: relative와 left: 50px를 적용하여, 원래 위치에서 오른쪽으로 50px 이동시킨 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
position: relative;
color: white;
background-color: orange;
border: 2px dashed blue;
left: 50px;
}
</style>
</head>
<body>
<h2>데모 제목</h2>
<p>데모 텍스트입니다.</p>
<p>데모 텍스트입니다.</p>
<div class="demo">
position: relative;
</div>
<p>또 다른 데모 텍스트입니다.</p>
</body>
</html>실행 결과
위 코드를 실행하면 주황색 배경의 div 요소가 원래 위치에서 오른쪽으로 50px만큼 이동하여 화면에 표시됩니다. 주변 텍스트는 각자의 원래 자리를 그대로 유지하며, 이동한 요소 때문에 레이아웃이 밀려나지 않는다는 점이 상대 위치 지정의 핵심입니다.
