Position 속성에 대해 명확하게 설명할정도로 정리가 되지 않아서 공부했습니다.

Css Position

position을 이용해 어떻게 배치할지 정하고,
top, right, bottom, left를 이용해 어디에 배치할지 정할 수 있습니다.

Position: static

일반적인 흐름을 뜻하는 기본값입니다.
top, right, bottom, left가 영향을 주지 않습니다.
차례대로 왼쪽에서 오른쪽, 위쪽에서 아래쪽으로 쌓이게 됩니다.

Position: relative

자기자신을 기준으로 top, right, bottom, left의 값을 적용합니다.
적용하는 방향은 안쪽이 양수값입니다.

top: 10px을 하게되면 위로 10px 올라가는게 아니라 위에서부터 내쪽으로 10px을 이동한다는 뜻이기 때문에 아래로 밀리게 됩니다.

position: relative와 top: 50px

Position: absolute

레이아웃을 position: statc이 아닌 부모태그를 기준으로 설정합니다.

#red에 position: relative
#blue에 position: absolute와 top: 50px, left: 0

Position: fixed

레이아웃을 viewport 기준으로 설정합니다.

#blue에 position: absolute와 top: 50px, left: 0

그림판을 사용할때 전체 큰 그림중에서 일부만 돋보기로 보게 됩니다.
웹에서도 이런식으로 전체 페이지가 아니라 내가 보는화면을 뷰포트라고 합니다.
뷰포트 기준이기 때문에 스크롤을 내려도 고정된 영역이 됩니다.

absolute의 경우 red를 벗어나지 않았지만
fixed는 red를 벗어나고, 스크롤을 해도 고정된 영역임을 알 수 있습니다.

Position: sticky

기본적으로 position: static 상태와 같이 일반적인 흐름에 따르지만
스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정합니다.

sticky에 대한 설명은 레진 기술 블로그에 상세하게 설명되어 링크로 첨부합니다.
https://tech.lezhin.com/2019/03/20/css-sticky

참고

https://developer.mozilla.org/ko/docs/Web/CSS/position
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
https://tech.lezhin.com/2019/03/20/css-sticky