css 위치지정(position)

position 프로퍼티에는 relative, absolute, static, inherit, fixed 5가지 값을 설정할 수 있다.

대부분의 엘레먼트에는 static이 기본값으로 설정되어 있다.

 

static으로 지정된 엘리먼트는 페이지 내에서 차례대로 그 위치가 결정된다. 즉, 먼저 위치한 엘리먼트에 따라 현재 엘리먼트의 위치가 결정된다.

 

relative는 static의 위치에서 지정된 오프셋만큼 떨어진 위치에 놓는 방식이다.

 

absolute는 엘리먼트의 위치를 절대값으로 지정하기 때문에 다른 엘리먼트에 영향을 받지 않는다. 즉, 다른 엘리먼트와 겹쳐서 위치시키는 것도 가능해진다.

 

fixed방식은 absolute와 비슷하며, 특정 시야각에서 상대적인 위치에 엘리먼트를 놓는다는 점이 다르다.

 

 

top, right, bottom, left, z-index 프로퍼티는 position을 absolute로 설정했을때만 동작한다. 프로퍼티 값을 음수로 지정하면 페이지의 외부에 위치시킬 수 있다. 

[출처] css 위치지정(position)|작성자 난초