CSS parent element’s position attribute is absolute, child element’s position attribute is relative or vice versa
CSS Parent Element Position Property is Absolute, Child Element Position Property is Relative, or Vice Versa
In this article, we’ll explain the effects of relative positioning when the parent element’s position property is absolute, and absolute positioning when the parent element’s position property is relative.
Read more: CSS Tutorial
Parent element’s position property is absolute, child element’s position property is relative
When a parent element’s position property is set to absolute, it no longer occupies a position in the document flow and is positioned relative to its nearest ancestor element with a positioning property (relative, absolute, fixed, or sticky). In this case, if a child element’s position property is set to relative, it is positioned relative to the parent element.
Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
position: absolute;
top: 50px;
left: 50px; border: 1px solid black;
}
#child {
position: relative;
top: 20px;
left: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
This is the child element.
</div>
</div>
</body>
</html>
In the above code, the parent element’s position is set to absolute, while the child element’s position is set to relative. The parent element is absolutely positioned 50 pixels from the top and left, while the child element is positioned relative to the parent, 20 pixels from the top and left.
Parent element’s position property is relative, child element’s position property is absolute
When a parent element’s position property is set to relative, it still occupies a position within the document flow, but it serves as a reference point for absolutely positioned elements. If a child element’s position property is set to absolute, it is positioned relative to the parent element within the document flow.
Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
position: relative;
border: 1px solid black;
width: 300px;
height: 200px;
}
#child {
position: absolute;
top: 50px;
left: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
This is the child element.
</div> </div>
</body>
</html>
In the code above, the parent element’s position is set to relative, while the child element’s position is set to absolute. The parent element still takes its place in the document flow, but the child element is positioned relative to the parent, 50 pixels from the top and 50 pixels from the left.
Summary
Relative positioning can be achieved by setting the parent’s position property to absolute and the child’s position property to relative, or by setting the parent’s position property to relative and the child’s position property to absolute.
In the first example, the parent element is positioned out of the document flow, and the child element is positioned relative to the parent. In the second example, the parent element is still positioned in the document flow, but the child element is positioned relative to the parent.
Using this relative positioning relative to the parent element, we can create a variety of dynamic layout effects, making web pages more creative and attractive.