[CSS] position : fixed VS sticky

position 속성은 문서 상에 요소를 배치하는 방법을 지정!

값으로는 top, right, bottom, left 등이 있다.

• static : 기본값
• relative : 요소를 일반적인 문서 흐름에 따라 배치하고 자기 자신을 기준으로 top, right, botto, left 값에 오프셋 적용.
• absolute : 요소를 일반적 문서 흐름에서 제거. 페이지에 레이아웃 공간도 배정하지 않는다. (부모요소가 값 인식못함)
  가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치. 만약 없으면 초기 컨테이닝 블록 기준으로!

✅ fixed

요소를 일반적인 문서 흐름에서 제거하고, 레이아웃 공간 배정도 안함. 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다.
-mdn

문서의 흐름에서 제거된다는 게 sticky와 차이점.
뒤에 문서 내용과 겹쳐서 나온다.
사이트 내에서 스크롤을 내려도 계속 그 자리에 팝업으로 떠있어야 되는 작은 창들을 쓸 때 용이할 듯!

✅ sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.

문서 내용들과 겹치지 않고 배치된다.
흐름에 따라 배치되기 때문에 aside로 분류되는 광고들! 배너들! 배치할 때 용이!
다크모드 버튼 같은 거 말입니다~