부모 자식 간에 발생하는 마진 병합 현상이 일어나지 않으며 파란색 박스가 생성된 최초 위치를 기준으로 움직입니다.

다음으로 margin-top 속성을 주석으로 처리하고 top 속성을 적용해 봅니다.

/* margin-top: 100px; */
/* 브라우저 왼쪽 상단을 기준으로 top 속성이 적용됩니다. */
top: 100px;

그림 8-20 브라우저 왼쪽 상단을 기준으로 top 속성이 적용된다

fixed 속성값과 마찬가지로 브라우저 왼쪽 상단을 기준으로 파란색 박스가 아래로 움직입니다. 즉, absolute 속성값 또한 top, right, bottom, left 속성을 사용할 수 있다는 것을 알 수 있습니다.

단, fixed 속성값과 다른 점은 absolute 속성값은 부모의 position 상태에 따라 좌표 기준점이 달라진다는 점입니다. #position_absolute_parent 안에 relative 속성값을 적용하고 결과를 확인하면 파란색 박스가 노란색 박스를 기준으로 다시 움직입니다.