CSS에서 부모 요소에 대한 상대적 위치 지정

요소에 relative가 지정되고, 그 자식 요소에 absolute가 지정되면, 이 자식 요소는 브라우저 창이 아닌 자신의 부모 요소를 기준으로 위치하게 됩니다.

일반적으로 이 경우 부모 요소에 오프셋 없이 relative를 지정합니다. 이렇게 하면 부모 요소 자체에는 아무런 변화가 없지만, 이제 그 모든 자식 요소들은 이 부모 요소를 기준으로 위치하게 됩니다.

예제를 통해 살펴보겠습니다.

예제

먼저, 위치 지정 없이 부모 블록과 자식 블록을 만들어 보겠습니다:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

예제

이제 녹색 블록에 절대 위치를 지정해 보겠습니다. 부모 요소에 relative가 지정되지 않았으므로, 자식 요소는 브라우저 창을 기준으로 위치하게 됩니다:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

예제

이제 부모 요소에 relative를 지정하겠습니다. 이 경우 자식 요소는 자신의 부모 요소를 기준으로 위치하게 됩니다:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

실습 과제

다음 과제에서 메인 블록은 margin 값을 auto로 설정하여 중앙에 배치되며, 다른 요소들은 position 속성을 사용하여 이 블록을 기준으로 위치합니다.