fixed 속성값과 달리 파란색 박스가 생성된 최초 위치를 기준으로 좌표가 설정되므로 100px만큼 아래로 이동합니다. 즉, relative 속성값은 top, right, bottom, left 속성을 사용할 수 있습니다.
다음으로 부모의 높이와 top 속성을 주석으로 처리해 봅니다.
#position_relative_parent {
width: 500px;
/* relative 속성값은 부모의 높이에 영향을 줄 수 있습니다. */
/* height: 500px; */
background-color: yellow;
}
#position_relative_child {
position: relative;
width: 200px;
height: 200px;
background-color: blue;
/* margin-top: 100px; */
/* top: 100px; */
}
그림 8-18 relative 속성값은 부모의 높이에 영향을 준다