Position

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. 

**top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.

Values

📌static

• 요소를 일반적인 문서 흐름에 따라 배치
• z-index 속성이 아무 영향도 주지 않음
• default 값( position을 따로 지정하지 않으면 전부 static으로 자동 설정됨)

📌relative

• 요소를 일반적인 문서 흐름에 따라 배치
• 원래 위치 기준으로 top, right, bottom, left의 값에 따라 offset을 적용
  • offset은 요소의 위치를 나타내는 수치
• 원래 자기 위치만큼 크기를 차지함
• offset은 다른 요소에는 영향을 주지 않음
• z-index가 auto가 아니면 새로운 쌓임 맥락(stacking context) 생성 → 다른 요소들보다 앞에 위치
  • 쌓임 맥락(stacking context)은 페이지에서 요소들간의 앞뒤가 있다는 것

📌absolute

• 요소를 일반적인 문서 흐름에서 제거
• 원래 자기 위치만큼 크기를 차지하지 않음
• 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치
  • display: absolute; 를 주고 싶은 요소의 부모요소(가장 가까운 상위 요소)에 display: relative;를 주는 것이 관례
• 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼음
  - 컨테이닝 블록은 position** 속성 값이 static 이 아닌
  (fixed , absolute, relative, sticky) 가장 가까운 조상의 내부 여백 영역이 됨

📌fixed

• 요소를 항상 고정된 위치에 배치
• 요소를 일반적인 문서 흐름에서 제거
• 원래 자기 위치만큼 크기를 차지하지 않음
• 대신 뷰포트(viewport)의 초기 컨테이닝 블록을 기준으로 삼아 배치
  • 뷰포트(viewport)는 현재 브라우저 전체화면
• 항상 새로운 쌓임 맥락을 생성 → 다른 요소들보다 앞에 위치

📌sticky

• 스크롤 전까지는 relative, 스크롤 후에는 fixed
• 요소를 일반적인 문서 흐름에 따라 배치
• 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 offset적용
• 항상 새로운 쌓임 맥락을 생성 → 다른 요소들보다 앞에 위치
• "스크롤 동작"(overflow가 hidden, scroll, auto ,overlay)이 존재하는 가장 가까운 조상에 달라붙음