CSS 포지션(Position)

Position은 이름처럼 태그들의 위치를 지정해주는 CSS입니다.

 

static(default)

모든 엘리먼트들의 position은 기본값이 static이므로 따로 설정해 주지 않아도 됩니다.

inline 엘리먼트는 왼쪽에서 오른쪽. block 엘리먼트는 위에서 아래로 쌓이게 됩니다.

 

relative

별도의 프로퍼티를 지정하지 않으면 static과 동일하게 동작합니다.

상대적으로 지정된 엘리먼트에 top, bottom, left, right의 프로퍼티를 지정하게 되면 지정한 위치로 조정됩니다.

 

fixed

fixed는 뷰포트에 상대적으로 위치가 지정됩니다. 페이지가 스크롤되어도 늘 같은 위치에 엘리먼트가 위치하게 됩니다. relative와 마찬가지로 top, bottom, left, right의 프로퍼티를 사용합니다.

 

absolute

absoulte는 뷰포트에 상대적으로 위치가 지정되는 게 아닌 인접한 부모 엘리먼트에 상대적으로 위치가 지정되게 됩니다.

기준으로 삼게될 부모 엘리먼트가 없는 경우에는 body를 기준으로 상대적 위치가 지정됩니다.