position

요소의 위치를 정의하는 속성이다. top, bottom,left,right 속성과 함께 사용되어 위치를 지정한다.

목차

• static
• relative

static

position 프로퍼티의 기본값이다. 부모 요소의 위치를 기준으로 좌->우, 상->하 순서로 배치되며 이미 설정된 position을 무효화할때 사용될 수 있다. top, bottom,left,right 속성이 무시된다.

relative

static을 기준으로 좌표 속성을 이용해 위치를 이동시킨다.
relative=static+(top|right|bottom|left)

absolute

static 요소를 제외한 가장 가까운 조상 요소를 기준으로 좌표 속성만큼 이동한다. 다른 요소가 위치를 점유하고 있어도 밀리지 않고 덮어쓴다(부유 객체) static을 기준 삼는 relative와 달리 부모를 기준으로 위치한다. 모든 조상 요소들이 static인 경우 document body를 기준으로 위치해 absoulte 요소는 부모 요소를 벗어나 자유롭게 위치할 수 있다.

부유 객체

fixed

부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 속성을 통해 이동한다. 스크롤이 되어도 위치가 변하지 않는다.

예시화면 보기

parent element

static

relative

absolute

fixed

a