CSS의 position: relative 속성은 요소를 원래 있어야 할 위치(일반적인 문서 흐름상의 위치)를 기준으로 상대적으로 이동시킬 때 사용합니다. 요소 자체는 원래 자리를 기준점으로 삼기 때문에, left, right, top, bottom 속성과 함께 사용하면 지정한 값만큼 요소가 이동하게 됩니다.
position: relative의 동작 방식
요소에 position: relative;를 적용하면 다음과 같은 특징이 있습니다.
- 요소는 여전히 일반적인 문서 흐름(normal flow)을 유지하며, 주변 요소들의 배치에는 영향을 주지 않습니다.
left,top등의 오프셋 속성을 지정하면 원래 위치에서 해당 값만큼 시각적으로 이동합니다.- 이동해도 원래 차지하던 공간은 그대로 유지됩니다.
예제 코드
아래 예제는 position: relative;를 적용한 div 요소를 왼쪽에서 20px만큼 이동시키는 코드입니다. 직접 실행해서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
left: 20px;
border: 3px solid blue;
}
</style>
</head>
<body>
<h1>Positioning Element</h1>
<div>
div element with position: relative;
</div>
</body>
</html>실행 결과
정리
position: relative;는 요소를 원래 위치 기준으로 미세 조정할 때 유용하며, absolute로 배치된 자식 요소의 기준점(컨테이닝 블록) 역할도 하기 때문에 실무에서 매우 자주 사용되는 속성입니다.