1. position 프로퍼티

position 프로퍼티는 요소의 위치를 정의한다.

• top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정할 수 있다.

1.1 static (기본 위치)

static은 position프로퍼티의 기본값default value이다. (즉 position property를 따로 지정하지 않았을때와 같은 효과를 주는 값이다)

• 보통 위에서 아래로, 왼쪽에서 오른쪽 순으로 배치되며, 자식 요소로서 존재할 때는 부모 위치를 기준으로 배치된다.
• position 프로퍼티의 기본값이기 때문에 평소에는 이 값을 지정할 일은 없고, 이미 설정된 position을 무력화하기 위해 사용되는 경우가 있다고 한다.
• 좌표 프로퍼티 (top, bottom, left, right )와 함께 사용될 수 없다. 사용될 경우 무시된다.

1.2 relative (상대 위치)

기본 위치 (static으로 설정했을때 위치)를 기준으로 좌표 프로퍼티 (top, bottom, left, right )를 사용하여 위치를 지정할 수 있는 프로퍼티 값이다.

• static을 사용할때와 차이점은 좌표 프로퍼티의 동작 여부 뿐이며 그 외는 동일하게 동작한다고 한다.

1.3 absolute (절대 위치)

absolute 값을 지정하면 부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동한다. 즉, relative, absolute, fixed 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정된다.

• 만일 부모 또는 조상 요소가 static인 경우, document body를 기준으로 하여 좌표 프로퍼티대로 위치하게 된다.
• 따라서 부모 요소를 배치의 기준으로 삼기 위해서는 부모 요소의 position을 relative등으로 정의하여야 한다.
• 이때 다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다. (이런 특성을 부유 또는 부유 객체라 한다 → 이러한 특성 때문에 absolute라는 이름이 붙는듯? 겹치는 요소 있어도 밀리지 않고 자신의 자리를 지키니까.)
• absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

relative와 absolute의 차이점

• relative 프로퍼티는 기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다. 따라서 무조건 부모를 기준으로 위치하게 된다.