CSS에서 절대적 부모를 기준으로 한 포지셔닝

이전 강의에서 우리는 부모 요소에 relative를 설정하면, 그 자식 요소들이 부모를 기준으로 절대적으로 위치하게 된다는 것을 배웠습니다. 이는 일반적으로 부모 요소가 일반 흐름에서 벗어나지 않도록 하고 싶을 때 사용하는 일반적인 방법입니다.

부모 요소에 absolute가 설정된 경우도 있을 수 있습니다. 이 경우, absolute가 설정된 자식 요소들도 브라우저 창이 아닌 해당 부모 요소를 기준으로 위치하게 됩니다:

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

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

400px 크기의 절대 포지션 정사각형 블록을 만드세요. 그 안에 50px 크기의 두 개의 블록을 더 만드세요. 첫 번째 블록은 부모 요소의 오른쪽 상단 모서리에 배치하고, 두 번째 블록은 부모 요소의 왼쪽 하단 모서리에 배치하세요.