한 줄 요약
relative는 원래 자리를 그대로 비워 둔 채, 그 자리를 기준으로 요소를 살짝 옮깁니다.
비유로 이해하기
영화관에서 내 좌석은 그대로 두고 몸만 옆으로 살짝 기울여 앉는 모습을 떠올려 보세요. 좌석(원래 자리)은 여전히 내 것이라 옆 사람이 그 자리로 들어오지 않습니다.
position: relative도 같습니다. top: 20px을 주면 원래 자리에서 20px 아래로 내려가 보이지만, 원래 자리는 빈칸으로 남아 있어서 주변 요소들은 그대로입니다.
비교해 보기
- margin으로 옮기기: 자리 자체가 이동해서 아래 요소들도 같이 밀립니다.
- relative + top/left로 옮기기: 보이는 위치만 바뀌고, 주변 요소는 전혀 영향을 받지 않습니다.
- 그래서 relative는 ‘살짝 어긋나게’ 연출하거나, 다음 편에서 배울 absolute의 기준점으로 자주 쓰입니다.
직접 실행해 보기
가운데 상자의 top과 left 값을 바꿔 보세요. 상자는 움직이지만 아래 상자는 제자리에 있습니다. 비교를 위해 top 대신 margin-top: 20px을 넣어 보면 아래 상자까지 밀리는 걸 볼 수 있어요.
GenerateBlocks에서는
GenerateBlocks 스타일 패널의 Position에서 Relative를 고르면 Top, Left 같은 위치 입력칸을 쓸 수 있습니다. 실무에서는 직접 옮기기보다 ‘이 상자를 기준으로 삼겠다’는 표시로 더 자주 씁니다.
참고: MDN: Positioning · CSS-Tricks: Absolute, Relative, Fixed Positioning