css의 position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. 이후 top, right, left, bottom 등을 이용해 요소를 이동할 수 있다.

• 기본값은 static이다. 일반적인 문서의 흐름에 따라 배치한다. top, right, left, bottom 등이 아무런 영향을 미치지 못한다.

1. relative

static과 같이 일반적인 문서의 흐름에 따라 배치하나 자기 자신을 기준으로 위치를 조정할 수 있다. 특정 요소의 위치를 조정하려면 relative로 설정한 후 top 등을 이용해서 옮기면 된다. 또한 이동하더라도 다른 요소에 영향을 주지 않는다.

2. absolute

relative와 달리 요소를 문서의 일반적인 흐름에서 제거한다.(원래 문서 상 순서와 관계없이 독립적으로 움직인다) 기준은 속성이 relative인 부모 요소를 기준으로 한다.(부모 요소중 relative가 없다면 body를 기준으로 한다. 바로 위 부모가 아니더라도 조상 중에 가장 가까운 relative 태그를 기준으로 한다.)

3. fixed

뷰포트, 즉 보이는 화면을 기준으로 요소를 옮기고 고정한다. 스크롤을 내려도 계속 따라다니는 내비게이션 바가 그 예이다. 이것 역시 일반적인 문서 흐름에서 제거하고 다른 요소에 간섭하지 않는다. fixed 설정 후 top 등으로 옮기면 된다.