Position의 속성과 각각의 특징?

position 속성은 요소의 위치를 지정하는 데 사용되며, 다양한 값들을 통해 요소를 배치하는 방법을 제어합니다.

position: 속성;

1. position: static;
   기본 값으로, 문서 흐름에 따라 요소를 배치합니다.
   top, right, bottom, left 속성이 적용되지 않습니다.
   (포지션이 뭔지도 모르는상태)

2. position: relative;
   요소를 자신의 기본 위치에서 상대적으로 이동시킵니다.
   요소를 일반적인 문서 흐름에 따라 배치하되,
   top, right, bottom, left 속성 값에 따라 적용됩니다.
   (top: 100px; 위에서 100px만큼 떨어뜨려!)

3. position: absolute;
   요소를 일반적인 문서 흐름에서 제거하고,
   요소를 위치 상의 가장 가까운 조상(부모) 요소를 기준으로 배치합니다.
   부모 중에 position 값이 static이 아닌 요소를 찾아 기준으로 삼습니다.
   부모 중에 해당 요소가 없으면 최상위(루트) 요소(body)를 기준으로 삼습니다.

4. position: fixed;
   요소를 일반적인 문서 흐름에서 제거하고,
   지정된 위치에 고정시킵니다.
   요소를 뷰포트(브라우저 창) 기준으로 고정합니다.
   스크롤이 발생해도 화면 상에 고정된 위치에 남습니다.

5. position: sticky;
   요소를 일반적인 문서 흐름에 따라 배치하고,
   요소를 상위 요소의 스크롤 영역 안에서 상대적으로 위치시킵니다.
   상위 요소의 스크롤 영역을 벗어나면 relative처럼 동작하며 스크롤 영역 안에서는 fixed처럼 동작합니다.
   상위 요소 중에 position: relative, position: absolute, position: fixed 등이 지정된 요소가 있어야 합니다.