1. relative
- 기준점: 자기 자신의 원래 위치
- 특징 : 마이너스 값은 아래가 아닌 위로 올라감을 의미한다.
position: relative자체로는 아무런 변화가 일어나지 않는다.
top,right,bottom,left로 위치를 설정해줘야 한다.
position: relative;
top: 10px;
right: 8px;2. absolute
- 기준점 : 자신과 가장 가까운 부모 요소
- 특징: 부모 요소에 static이 아닌 속성(relative, fixed, absolute)이 적용되어 있어야 한다. 없을 시, body 태그가 기준이 된다.
position: absolute;
bottom: 10px;
left: 8px;3. fixed
- 기준점: 브라우저의 뷰포트
- 부모 요소의 영향을 받지 않는다. 즉, absolute와 달리 부모 요소의 포지션이랑은 관련이 없다.
position: fixed;
bottom: 10px;
left: 8px;한 줄 요약
relative는 자기 자신을 기준으로 움직이고 싶을 때,
absolute는 부모 요소를 기준으로 움직이고 싶을 때,
fixed는 브라우저 화면에 무언가를 고정하고 싶을 때(ex. navbar, 상단 이동 버튼) 사용한다.
공통적인 사용 방법은 position을 설정하고 top, right, bottom, left로 원하는 만큼 이동시킨다.
