position 속성이란?

position 속성은 요소의 위치를 지정하고 제어하는 데 사용한다.

1. static (기본값)
   -> 요소는 문서의 일반적인 흐름에 따라 배치됨.
   -> top, right, bottom, left, z-index 속성은 무시됨.

2. relative
   -> top, right, bottom, left 속성을 사용하여 자신의 기본 위치로부터 이동할 수 있음.
   -> 다른 요소들은 여전히 요소의 기본 위치를 차지하는 공간을 인식함.

3. absolute
   -> 요소는 문서의 일반적인 흐름에서 제거되며, 가장 가까운 조상 요소 중 relative, absolute, fixed, sticky 속성을 가진 요소를 기준으로 배치됨. 그런 조상 요소가 없으면 초기 컨테이닝 블록을 기준으로 함.
   (보통, App.css에서 사용하는 듯함. 브라우저 크기가 줄어도 화면의 글자들이 세로로 되거나 하는걸 방지함.)

4. fixed
   -> 요소는 문서의 일반적인 흐름에서 제거되며, 뷰포트를 기준으로 배치됨.
   -> 뷰포트에 대해 고정되므로 스크롤해도 위치가 변하지 않음.
   -> top, right, bottom, left 속성을 사용하여 위치를 지정함.
   (주로, 상단의 네비게이션 메뉴 바에서 많이 이용하는 듯)

5. sticky
   -> 요소는 문서의 일반적인 흐름에 따라 배치되지만, 스크롤 위치에 따라 relative와 fixed 사이에서 전환됨.
   -> 스크롤 위치가 특정 임계값에 도달하면 fixed처럼 동작함.
   -> top, right, bottom, left 속성을 사용하여 임계값을 설정함.