Position

• position: static

보통 상태임 왼 → 오 , 위 → 아래로 쌓임 (자기 부피에 따라서)

• position: relative

static 일 때 위치를 기준으로 top, right, bottom, left 방향으로 움직일 수 있음 

예를 들어,

position: relative;
top: 10px;

은 위에서부터 아래로 10px만큼 움직인 것 (top: -10px; 하면 위로 움직임)

• position: absolute

position: static 속성을 가지고 있지 않은 부모를 기준으로 움직임 (아무것도 포지션이 없다면 body 기준)

보통 부모 요소에 position: relative; 부여

부모 요소를 기준으로 움직이기 때문에 크기도 부모요소의 크기에 맞춰짐

• position: fixed

뷰포트 위치를 기준으로 고정시킴 (스크롤 되어도 계속 같은 위치에 고정)

넓이를 정해야하며 오른쪽 상단에 고정시키고 싶으면 top: 0px; right: 0px; 주기

보통, z-index값을 높여 젤 앞에 보이게 하는 메뉴바로 쓰임

• position: sticky

position: sticky;  는 뷰포트 위치를 기준으로 조건에 도달할 때 까진 static 의 성질을, 조건에 도달하면 fixed 의 성질을 가진다. 

사용 조건으로는 top,right,bottom,left 중 하나의 조건을 써야하며 (IE에선 지원 불가) 부모에 overflow가 설정되어 있으면 동작하지 않는다. 그리고, 부모의 높이가 설정되어 있어야 동작한다. ( % 단위는 불가 )

즉, 스크롤 할 만한 부모 박스가 있어야하고, top등 좌표속성과 함께 써야 제대로 보인다.