position의 속성들과 각각의 특징을 설명해 주세요.

position의 속성들과 각각의 특징을 설명해 주세요.

1. position

• 문서 상에 요소를 배치하는 방식을 지정하는 CSS 속성
• position 속성에 특정 값을 대입할 경우 "포지셔닝했다"고 표현함
• position 속성값에 따라 추가적인 오프셋 속성(top/right/bottom/left, 단축 속성 inset)을 사용함

2. position 속성값

• static, relative, absolute, fixed, sticky

2-1. static

• 기본값
• 일반적인 문서 흐름에 따라 배치
• 문서 흐름에서 유지
• 오프셋 속성이 영향을 끼치지 못함

2-2. relative

• 일반적인 문서 흐름에 따른 위치를 기준으로 상대적인 위치에 배치
• 문서 흐름에서 유지
• 오프셋 속성으로 위치를 지정할 수 있음

2-3. absolute

• 가장 가까운 포지셔닝 조상 요소를 기준으로 절대적인 위치에 배치
• 문서 흐름에서 제거
• 오프셋 속성으로 위치를 지정할 수 있음

2-4. fixed

• 뷰포트를 기준으로 절대적인 위치에 배치
• 문서 흐름에서 제거
• 오프셋 속성으로 위치를 지정할 수 있음

2-5. sticky

• static + fixed 방식
  • 일반적인 문서 흐름에 따라 배치
  • 스크롤하여 부모 요소가 임계값을 넘으면 뷰포트를 기준으로 절대적인 위치에 배치
  • 스크롤하여 부모 요소의 반대편 모서리를 만나면 위치 고정을 해제
• 문서 흐름에서 유지
• 오프셋 속성으로 위치를 지정할 수 있고, 지정하지 않으면 static과 동일한 배치를 보임

3. 참고 자료

• MDN 개발 문서(position)