이번에는 css에서의 위치제어 속성들을 알아보겠습니다.

position

포지션의 종류는 여러가지가 있습니다. 포지션의 종류에 대해 살펴보겠습니다.

static

static은 그냥 기본값이라고 생각하시면 될 것 같습니다.
특별한 위치에 지정하는것 아니라 그냥 지정된 엘리먼트에 대해 위치를 지정해주는 것입니다.

relative

relative는 따로 포지션값을 설정하지 않으면 static과 같습니다.
그러나 top, left등을 조작해주면 기본위치와 다르게 엘리먼트의 위치가 움직입니다.

fixed

fiexd는 말 그대로 고정된 포지션입니다. 스크롤을 할때에도 스크롤에따라 이동되는 것이 아니라,
그대로 처음 위치에 고정됩니다.

지금 jsfiddle 레이아웃에서 스크롤이 생기지 않아 확인이 좀 그렇긴하지만 만약 스크롤을 이동한다해도 fixed는 저 위치에 고정됩니다.

absolute

absolute는 fixed와 비슷하면서 다릅니다.
fixed와 같이 처음 위치에 고정이 되지만 다른점은 부모엘리먼트를 기준으로 상대적으로 접근합니다.
div안에 div에게 absolute를 주면 absoluteDiv를 감싸고 있는 div가 부모엘리먼트가 됩니다.
감싸고 있는 부모엘리먼트가 없을때는 body가 부모엘리먼트가 됩니다.