CSS position에 대해 알아보기

position은 위치를 나타낼 때 사용하는 기준점이다.

default 값은 static으로 정적으로 고정되어 위치이동이 안된다.

position: relative;

• 원래 있어야 하는 위치가 기준

position: absolute;

• static이 아닌 가까운 조상의 기준
• 원래 부모와의 위치상 관계가 끊어져 붕 뜨게 되어 부모의 크기가 이 요소를 무시하게 된다.
• 일반적으로 사용할때 기준이 될 수 있는 부모의 position:relative; 해준다.

position: fixed;

• 뷰포트 기준
• 스크롤 해도 고정이 됨

position: sticky;

• 원래 있어야 할 자리에 고정이 됨
• 스크롤 해도 고정이 됨