CSS - position

1.static

positon을 설정하지 않았을때 기본값.
요소를 일반적인 문서 흐름에 따라 배치.

2.relative

요소를 일반적 문서 흐름에 따라 배치.
자기 자신을 기준으로 오프셋 적용.
오프셋은 다른 요소에는 영향을 주지 않음.
(따로 toa, bottom, left, right 값을 주지않으면 아무런 변화없음)

3.absolute

절대위치 지정
요소를 일반적인 문서 흐름에서 제거, 페이지 레이아웃 공간도 배정안함.
가장 가까운 조상요소의 position이 static이 아닌 조상을 기준으로 잡음.
(조상 요소 중 static이 없다면 기준은 HTML태그가 됨)
원하는 위치에 요소를 배정하고 싶으면 그에 가장 가까운 조상요소에 position: relative를 주면 됨

4.fixed

고정위치 지정
absolute와 마찬가지로 가장 가까운 조상 요소의 position이 static이 아닌 요소를 기준으로 처음 자리잡음.
뷰포트에 고정됨.

5.sticky

평소 static과 같은 흐름에 따르다가 지정한 임계값 이상부터는 스크롤이 되지않고 fixed처럼 고정됨.
top, bottom, right, left 속성 필수.
scroll박스 고정(scroll박스가 오프셋 기준이 됨)
sticky를 가진 요소의 조상 요소가 scroll박스를 벗어나면 다시 일반적인 흐름에 따름
(즉 사용시 top값을 줘야함)
사용시 주의할점
조상요소나, 부모요소에 overflow 속성이 들어가 있으면 sticky가 정상으로 작동하지 않음