CSS position

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

position 속성은 5가지 값을 선택해 지정할 수 있다.

static : 요소를 일반적인 문서 흐름에 따라 배치한다.
relative : 요소를 일반적인 문서 흐름에 따라 배치하고 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.
absolute : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다. 없으면 초기 컨테이닝 블록을 기준으로 삼는다.
fixed : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다.
sticky : 요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다.

출처 :

• position - MDN