Positioning relative to parent in CSS

If an element is set to relative and its descendant is set to absolute, then that descendant will be positioned relative to its parent, not relative to the browser window.

Typically, in this case, the parent is set to relative without offsets. In this case, nothing happens to this parent, but all its children will now be positioned relative to it.

Let's look at some examples.

Example

To start, let's just make a parent block and a child block without positioning:

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

Example

Now let's absolutely position the green block. Since the parent doesn't have relative specified, the child will be positioned relative to the browser window:

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

Example

Now let's specify relative for the parent. In this case, the child will be positioned relative to its parent:

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

Practical tasks

In the following tasks, the main block is centered using margin with a value of auto, and the others are positioned relative to it using the position property.