position 속성은 CSS에서 문서 상에 요소를 배치하는 속성으로, static, relative, absolute, sticky, fixed 이렇게 총 5가지 값이 있다. 하나씩 소개해보도록 하겠다.

static

1. 요소를 일반적인 문서 흐름에 따라 배치한다.
2. top, right, bottom, left, z-index 속성이 아무런 영향을 주지 못하고 무시된다.
3. position 속성의 기본값이다. position을 선언하지 않으면 기본적으로 position: static;이 된다.
4. 어떤 요소에 position: 다른 속성;을 줬다가 reset 해줄 때 사용한다.

relative

1. 요소를 일반적인 문서 흐름에 따라 배치한다.
2. 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 위치가 바뀐다. 즉, 요소를 원래 위치를 기준으로 상대적으로 배치해준다.

absolute

1. 요소를 일반적인 문서 흐름에서 제거한다.
2. 절대적일 것 같지만 상당히 상대적인 속성 값이다. 가장 가까운 조상 요소에 position이 있을 경우 그 위치에 대해 상대적으로 배치한다.
3. 조상 중 아무도 position을 쓰지 않았다면 document를 기준으로 삼는다.

sticky

1. 요소를 일반적인 문서 흐름에 따라 배치한다.
2. 가장 가까운 스크롤 되는 조상과 테이블 관련 요소를 포함한 가장 가까운 블록 레벨 조상을 기준으로 top, right, bottom, left의 값에 따라 위치가 바뀐다.
3. 한 마디로 말해서 sticky 속성 값은 스크롤이 되어서 해당 요소가 화면에 나오면 고정시킨다는 특성을 가지고 있다.
4. 가장 가까운 조상에 overflow 속성이 있다면 sticky가 동작하지 않는다.

fixed

1. 요소를 일반적인 문서 흐름에서 제거한다.
2. 문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력된다.
3. 한 마디로 말해서 fixed 속성 값은 항상 화면에 고정이 되는 요소를 만들고자 할 때 사용한다라고 생각하면 편하다.

예시