[CSS] position: relative란 무엇인가??

position: relative는 한 문장으로 정리하면 이렇게 말할 수 있습니다.

요소를 “원래 있던 자리”를 기준으로 살짝 이동시키는 속성

여기서 핵심 키워드는 **“원래 자리”**입니다.

 

1. 기본 상태 (position을 지정하지 않았을 때)

아무 position도 지정하지 않으면 요소는 기본값인 static 상태입니다.

• 위에서 아래로
• 왼쪽에서 오른쪽으로
• 문서 흐름(document flow)에 따라 차곡차곡 배치됨

즉, 순서대로 쌓이는 상태입니다.

 

2. margin으로 이동했을 때의 특징

먼저 margin을 사용한 예제부터 보겠습니다.

.green {
  margin-top: 30px;
  margin-left: 50px;
}

이 경우의 특징은 다음과 같습니다.

 

특징

• 요소 자체가 이동
• 동시에 다른 요소들도 영향을 받음
• 레이아웃 간격 자체가 변함

즉,
GREEN 박스를 움직이면서 ORANGE, PURPLE의 위치 관계도 같이 바뀜

 

margin은 공간을 밀어서 이동시킨다
→ 주변 요소의 배치까지 함께 바뀐다

 

3. position: relative를 적용하면 뭐가 달라질까?

이번엔 position: relative를 사용한 예제입니다.

.green {
  position: relative;
  top: 30px;
  left: 50px;
}

이때 일어나는 변화는 완전히 다릅니다.

• GREEN이 떠 있는 것처럼 보임
• 다른 박스 위에 겹쳐 보이기도 함
• 하지만 전체 흐름은 깨지지 않음

이게 바로 relative의 가장 중요한 포인트입니다

 

4. relative는 언제 쓰는 게 좋을까?

• 아이콘을 텍스트 위로 살짝 올리고 싶을 때
• 카드 안의 배지를 살짝 이동시킬 때
• absolute 요소의 기준점이 필요할 때
• 레이아웃은 유지하면서 시각적 위치만 조정하고 싶을 때

 

 

5. 정리하면

 

position: relative는
레이아웃을 망가뜨리지 않고
요소를 자기 자리 기준으로 살짝 움직이는 속성이다.