● absolute

position 속성값을 absolute로 지정하면 relative와 마찬가지로 요소가 기본 흐름에서 벗어나 좌표 속성에 따라 배치됩니다. 다만, 기준점이 다릅니다. relative일 때는 기준점이 요소의 왼쪽 위 모서리지만, absolute일 때는 웹 브라우저의 왼쪽 위 모서리입니다.

그림 6-49 absolute 값의 기준점

웹 브라우저는 기본 스타일 시트에 따라 body 태그에 margin 속성이 적용되어 있습니다. 그래서 relative.html 파일의 실행결과를 보면 요소와 웹 브라우저 사이에 여백이 있습니다. 그런데 absolute 값의 기준점은 웹 브라우저의 왼쪽 위 모서리이므로 웹 브라우저에서 표시될 때 기준점이 헷갈리지 않도록 body 태그의 margin 속성값을 0으로 지정하겠습니다. 그리고 position 속성값을 relative에서 absolute로 바꾸면 전혀 다르게 동작합니다.