🌱 기초 프론트엔드
CSS에서 relative란?
쉽게 이해하기
책상 위에 공책이 놓여 있는데, 그 자리는 그대로 차지한 채로 공책만 살짝 옆으로 밀어둔 것 같은 거예요. 다른 물건들은 원래 공책이 있던 자리를 기준으로 배치돼요.
핵심 정리
원래 위치를 기준으로 요소를 살짝 이동시킬 수 있어요.
자세히 알아보기
position: relative는 요소를 원래 위치에서 상대적으로 이동시키는 속성이에요. 핵심은 '원래 자리는 그대로 유지된다'는 점이에요. 시각적으로만 이동할 뿐, 다른 요소들은 여전히 그 요소가 원래 자리에 있다고 생각해요.
top, right, bottom, left 속성으로 얼마나 이동할지 정할 수 있어요. 예를 들어 top: 10px이면 원래 위치에서 위로 10px 떨어진 곳에 그려지고, left: -20px이면 왼쪽으로 20px 당겨져요. 음수 값도 사용할 수 있어서 자유롭게 조정할 수 있어요.
실무에서는 두 가지 용도로 많이 써요. 첫째는 요소를 살짝 미세 조정할 때예요. 디자인상 버튼을 2px만 아래로 내리고 싶다면 position: relative; top: 2px; 이렇게 쓰면 돼요. 둘째는 absolute 요소의 기준점을 만들 때예요. 부모 요소를 relative로 설정하면, 그 안의 absolute 자식 요소가 부모를 기준으로 배치돼요.
예를 들어 카드 컴포넌트 안에 '새 글' 배지를 우측 상단에 붙이고 싶다면, 카드를 position: relative로, 배지를 position: absolute; top: 10px; right: 10px; 이렇게 설정하면 카드를 기준으로 정확한 위치에 배지가 붙어요.