Position

position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖는다.

static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.

absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있다.

relative: 원래 있던 위치를 기준으로 좌표를 지정한다.

fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한다.

inherit: 부모 태그의 속성값을 상속받는다.

static

static속성값은 css 파일에서 top과 left의 값을 입력해주어도, 태그의 위치가 변하지 않고 기본값을 유지하고 있는 모습을 볼 수 있다.

relative

relative 속성값은 static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값이다. static을 기준으로 지정해준 top과 left값만큼 위치가 변한 것을 볼 수있다.

absolute

absolute 속성값은 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소를 기준으로하여 left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값이다.

fixed

fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정한다. 하지만 position: relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 된다.
결과창을 스크롤 해보면 fixed 속성값을 가진 div는 움직이지않고 한자리에 고정되어있는 모습을 볼 수있다.