static
- 요소의 기본 위치입니다. 특별한 위치 지정 없이 문서의 일반적인 흐름에 따라 배치
- top, right, bottom, left, z-index 속성이 적용되지 않음
relative
- 요소를 문서 흐름에 따라 배치하지만, top, right, bottom, left 속성을 사용하여 상대적인 위치 이동이 가능
- 요소가 차지하는 공간은 원래 위치에 그대로 남아 있음
- 주변 요소들의 배치에 영향을 주지 않고 자신만 이동
absolute
- 가장 가까운 위치 지정 조상 요소(즉, position이 relative, absolute, fixed, sticky인 부모 요소)를 기준으로 위치가 결정됨. 그런 부모가 없다면 뷰포트를 기준으로 결정.
- 문서 흐름에서 제거되어 다른 요소들이 이 공간을 차지
- top, right, bottom, left 속성을 사용하여 정확한 위치를 지정할 수 있음
fixed
- 뷰포트(브라우저 창)를 기준으로 위치가 결정
- 스크롤해도 위치가 고정되어 있음
sticky
- 스크롤 위치에 따라 static과 fixed 사이에서 동작이 변함
- 지정된 오프셋(top, right, bottom, left)에 도달하기 전까지는 일반적인 문서 흐름에 따라 배치되다가 오프셋에 도달하면 해당 위치에 고정
- 부모 요소의 범위를 벗어나지 않음
- CSS에서 반드시 오프셋 속성(top, bottom 등)을 지정해야 함
FE Developer