css 레이아웃

position 

복잡한 레이아웃을 만들기 위해서 position property를 사용한다.

position 프로퍼티에는 다양한 값을 설정할 수 있다.

static  

relative  

fixed  

absolute  

statc 은 기본값이다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아니다. 정적(static) 엘리먼트는 위치가 지정된 것이 아니며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정된다.

relative 는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작한다.

fixed 는 viewport에 상대적으로 위치가 지정되었는데 이는 페이지가 스크롤되더라도 늘 같은곳에 위치한다.

relative와 마찬가지로 top이나 right,bottom,left 프로퍼티가 사용된다.

absolute는 가장 다루기 까다로운 위치 지정 값이다. absolute는 뷰포트에 상대적으로 위치가 지정되는 게 아니라

가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면  

fixed 와 비슷하게 동작한다.