CSS Position

Position이란?

문서에서 요소를 배치할 때 위치를 지정하는 방법

정상 위치 - Static Position (기본값)

• 요소를 일반적인 흐름에서 정상적인 위치에 지정 (기본값)

position: static;

상대 위치 - Relative Position

• 요소를 일반적인 흐름에서 정상적인 위치에 지정한 후 이 위치를 기준으로 
• top, right, bottom left와 같은 offset을 통해 위치를 이동시킬 수 있다.

position: relative;

절대 위치 - Absolute Position

• 요소는 일반적인 흐름에서 제외되고, 페이지에 요소를 위한 공간이 생기지 않는다.
• 가장 가까운 조상의 위치를 기준으로 top, right, bottom left을 통해 상대적으로 위치를 지정한다. 

position: absolute;

절대 위치 - Fixed Position

• 요소는 일반적인 흐름에서 제외되고, 페이지에 요소를 위한 공간이 생기지 않는다.
• 뷰포트에 의해 만들어지는 블록(그냥 뷰포트 기준이라 볼 수 있다)을 기준으로 위치를 지정

position: fixed;

고정 위치 - Sticky Position

• 요소를 일반적인 흐름에 따라 위치에 위치하고, 
• 가장 가까운 스크롤링 조상의 위치를 기준으로 위치를 지정

position: sticky;