position

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.

static

모든 태그들은 기본 속성이 static이다. 차례대로 왼쪽에서 오른쪽 위에서 아래로 쌓이게 된다. 또한 top (en-US), right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않는다.

relative

태그의 위치를 변경하고 싶을 때 사용한다.
자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.

여기서 값을 주게되면 값을 준 만큼 공간을 둬라 라는 의미이다.

absolute

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다.

위 예시를 보면, absolute 클래스는 조상의 position이 없기 때문에 body를 기준으로 오른쪽으로 붙었다.
children 클래스는 parent의 position을 기준으로 하기때문에 왼쪽에 붙었다.

fixed

CSS의 고정 배치 (position : fixed)를 사용하면 브라우저의 전체 화면(viewport)을 기준으로 HTML 요소를 배치할 수 있다.

fixed는 말그대로 위치를 고정시키는 역할이다. 스크롤을 올리든 내리든 그 위치에 고정되어있다.