Relative positioning
◀    ■     ▶

Block-level이나 inline layout에 의해 위치가 결정되면, 이 위치를 기준으로 box를 상하좌우로 이동시킬 수 있다. 이것을 상대적 배열(relative positioning)이라고 한다. 이동시키는 정도는 top, left, bottom, right 속성으로 지정할 수 있다. Box의 위치를 이동시킨다고 해서 다음에 나오는 형제자매 element의 위치가 함께 이동되는 것은 아니다. 따라서, 상대적 배열을 이용하면, element box들이 서로 겹쳐지는 효과를 가져올 수 있다.
※ P안에 SPAN이 포함되는 경우, P는 SPAN의 부모(parent) element가 되고, SPAN은 P의 자식(child) element가 된다. P 다음에 다른 P가 올 경우, 두 개의 P는 서로 형제자매 관계(sibling)가 된다. P안에 있는 SPAN 안에 다시 EM이 포함된다면, P는 EM의 조상(ancestor)이 되고, EM은 P의 후손(descendant)이 된다.
부모 element가 상대적 배열에 의해 위치가 변경되면, 자식 element는 변경된 위치를 기준으로 배열된다.
하나의 element box를 상대적으로 배열하려면, position 속성의 값을 relative로 주어야 한다.

◀    ■     ▶