position 속성 종류
static, relative, absolute, fixed, sticky 가 있다.
static
position의 기본 값, 원래 있어야 할 위치인 HTML에 작성된 순서 그대로 브라우저 화면에 표시됨
relative
요소의 원래 위치를 기준으로 상대적으로 배치됨
요소의 원래 자리는 그대로 차지하고 있음
top, bottom, left, right 속성을 이용해서 요소의 원래 위치 기준 이동하도록 설정할 수 있다.
absolute
가장 가까운 포지셔닝(static이 아닌 position 속성 값)이 된 조상 요소를 기준으로 배치됨
글의 흐름에서 완전히 빠져서 요소의 원래 자리는 차지하지 않음
보통 상위 요소의 position 속성을 relative로 지정하여 배치할 기준을 잡고 사용함
fixed
브라우저 전체 화면을 기준으로 고정된 배치
top, bottom, left, right 속성을 이용해서 브라우저의 상하좌우에서 해당 요소가 얼마나 떨어져 있는지 결정한다.
글의 흐름에서 완전히 빠져서 요소의 원래 자리는 차지하지 않음
sticky
static처럼 원래 위치에 배치되어 있다가 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치된다. 기본적으로는 static처럼 배치하기 때문에 요소의 원래 자리를 차지한다.
top, bottom, left, right 설정이 필요하고, 가장 가까운 scroll되는 조상을 기준으로 배치한다.
