[css] position

static

position을 설정해주지 않았을 때의 기본 값이며,
HTML 문서 내에서 요소가 원래 있어야 하는 위치이다.
div요소가 순서대로 배치된 것을 볼 수 있다.

relative

요소가 원래 위치하고 있어야 하는 static상태를 기준으로 배치한다.
#second-div에 relative 속성을 부여하고 left와 top에 50px 주었더니, 왼쪽과 위쪽에 50px씩의 공간이 생겨 오른쪽과 아래로 이동한 것을 볼 수 있다.

absolute

(absolute는 이해하는데 조금 어려움이 있다. 사실 아직도 정확히 모르겠음.. 이해하는대로 수정하도록 하겠습니다.)
static 속성을 가지지 않는 조상 요소를 기준으로, 만약 없다면 body를 기준으로 배치한다. 보통은 relative - absolute 조합으로 많이 사용하는 것 같다. 아래 코드에서는 상위 요소가 없기 때문에 body를 기준으로 top과 left에 50px이 적용된 것을 볼 수 있다.

fixed

화면의 항상 고정된 위치에 배치한다. 스크롤을 내려도 위치가 변하지 않는 요소들을 생각해보면 된다.