CSS position

1. position: static

문서의 일반적 흐름을 따라 배치됩니다. top, right, bottom, left, z-index properties는 효과가 없습니다. default value가 static입니다.

2. position: relative

문서의 일반적 흐름을 따라 배치되지만, top, right, bottom, left로 현재 위치에서 offset을 줄 수 있습니다. page layout에서 요소에 주어진 공간은 static일때와 같습니다.

3. position: absolute

문서의 일반적 흐름에서 제거되고 page layout에서 요소를 위한 공간이 없어집니다. 가장 가까운 position이 static이 아닌 조상 요소를 기준으로 하거, 그렇지 않다면 initail containing block(body)를 기준으로 합니다.

4.position: fixed

역시 문서의 일반적 흐름에서 제거되고 page layout에서 공간을 할당받지 않습니다. 기준이 되는 것은 viewport 즉, 브라우저의 전체 화면이기 때문에 스크롤해도 화면에 고정되어있는 네비게이션바를 만들 때 사용합니다.

5. position: sticky

문서의 일반적인 흐름에 따라 배치되지만 스크롤 하기 전까지 relative처럼 행동합니다. 이후, 스크롤을 통해 맨 위에 붙으면 fixed처럼 화면에 고정되어 나타납니다.

출처: MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/position