Positioning relative to absolute parent in CSS

In the previous lesson we saw that if a parent is set to relative, its children will be absolutely positioned relative to it. This is most often done when you don't want the parent to fall out of the normal flow.

It may also be the case that the parent has absolute set. In this case, children with absolute will also be positioned relative to such a parent, and not relative to the browser window:

<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;
}

Make a square block with absolute positioning measuring 400px. Inside it, make two more blocks measuring 50px. Place the first block in the top right corner of the parent, and the second block in the bottom left corner.