[css]position 개념정리

position은 웹 문서안의 요소를 자유자재로 배치해주는 속성으로 중요하게 사용된다.

position: static | relative | absolute | fixed
종류는 위와같이 총 4가지로 나뉜다.

.wrap {
  position : static; /* 기준 X */
  position : relative; /* 기준은 자기 자신 */
  position : absolute; /* 기준은 부모 엘리먼트 */
  position : fixed; /* 기준은 viewport */
}

1.static
position속성의 default값으로 요소를 순서대로 배치하며 top,left,right,bottom같은 속성은 사용할 수 없다.

2.relative
아무값도 지정하지 않으면 static과 동일하나, top,left,right,bottom을 사용할 수 있으며 위치를 지정할 수 있다.

3.absolute
absolute는 가장 가까운 부모 엘리먼트를 기준으로 상대 위치가 지정된다. 일반적으로 부모 엘리먼트는 relative 속성값을 부여한다. 기준으로 삼을 수 있는 부모 델리먼트가 없다면 body를 기준으로 삼는다. 위의 예제는 relative했던 box2 안에 absolute한 box3를 넣었을 시 나타나는 결과값이다.

4.fixed
viewport를 기준으로 위치를 좌표로 결정한다.