더북(TheBook)

2차원과 3차원의 세계, relative 속성값

relative 속성값은 2차원과 3차원의 특징을 모두 갖습니다. ➊ 부모 자식 간에 발생하는 마진 병합 현상이 일어나고, ➋ top·right·bottom·left 속성이 적용되며, ➌ 부모가 높이를 갖고 있지 않으면 자식의 높이가 부모에게 영향을 줍니다.

#position_relative_child 안에 margin-top 속성을 사용하면 static 속성값과 마찬가지로 부모 자식 간에 발생하는 마진 병합 현상이 일어납니다.

예제 소스 Exercise/8장/2_position/3_relative.html

<div id="box1"></div>
<div id="position_relative_parent">
    <div id="position_relative_child"></div>
</div>