position 속성(relative, absolute, fixed)

position

css의 position은 element의 위치를 지정한다. position의 속성에는 relative, static, absolute, fixed가 있다.

position: static

element가 offset(top, bottom, right, left) 값을 무시하고 원래 자기의 위치를 지키게 된다.
따로 설정하지 않았을 경우 position의 디폴트는 static이다.

position: relative

element가 자기의 위치(static)를 기준으로, 상대적으로 offset값이 적용된 위치에 있게 된다.

position: absolute

static이 아닌 부모 element를 기준으로 상대적으로 offset값이 적용되며, offset을 0으로 할 경우 html element를 기준으로 상대적으로 offset값이 적용된다.
position: absolute일 경우 부모 element와의 관계성이 끊긴다. 즉, 부모 element의 속성을 상속하지 않는다.

position: fixed

element 위치 선정은 absolute와 같으며, 스크롤을 움직여도 고정된 위치에 있다.