Static
Static은 기본값입니다. 정적 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값을 사용하게 되었을때, 위치가 지정되었다고 표현합니다.
즉, 위치가 지정된 엘리먼트는 static으로 지정되지 않은 엘리먼트를 가르킨다.
Relative
Relative를 사용할 때 별도의 프로퍼티를 사용하지 않으면 static과 동일합니다. top, right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정됩니다.
absolute
absolute는 뷰포트에 상대적으로 위치가 지정되는게 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed와 비슷하게 동작합니다. 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문을 기준으로 삼고, 페이지 스크롤에 따라 움직입니다.
fixed
고정 엘리먼트인 fixed는 뷰포트에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤 되더라도 늘 같은 곳에 위치한다는 뜻입니다. relative와 마찬가지로 top, right, bottom, left 프로퍼티를 사용합니다.
예를 들어 position: fixed를 사용하고 top:0;, right:0;을 사용하게 되면 상단에서 0만큼, 우측에서도 0만큼 떨어져 있다는 뜻입니다. 즉, 우측 상단에 고정되게 됩니다.
Allday