Position
문서 상에(in document) element의 위치를 배치하는 방법을 지정한다. top, right, bottom, left 속성이 element를 배치할 최종 위치를 결정한다.
Position : static
element를 일반적인 문서 흐름에 따라 배치한다.
top, right, bottom, left 속성이 아무런 영향도 주지 않는다.(기본값)
Position : relative
element를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.
오프셋은 다른 요소에는 영향을 주지 않으며 페이지 layout에서 element가 차지하는 공간은 static일 때와 같다.
Position : absolute
element를 일반적인 문서 흐름에서 제거하고, 페이지 layout에 공간도 배정하지 않는다. 대신 가장 가까운 position : relative를 기준으로 배치된다.
단, position : relative가 없다면 최상위 element인 body를 기준으로 삼는다.
Position : fixed
element를 일반적인 문서 흐름에서 제거하고, 페이지 layout에 공간도 배정하지 않는다.
대신 viewport를 기준으로 삼아 배치한다. 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다.
viewport : 현재 창에서 문서를 볼 수 있는 부분을 말한다.
