Sometimes, we want to make element position absolute but relative to parent with CSS.
In this article, we’ll look at how to make element position absolute but relative to parent with CSS.
How to make element position absolute but relative to parent with CSS?
To make element position absolute but relative to parent with CSS, we set absolute
position on the child elements.
For instance, we write
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
to add divs inside a div.
Then we write
#father {
position: relative;
}
#son1 {
position: absolute;
top: 0;
}
#son2 {
position: absolute;
bottom: 0;
}
to make the child elements have absolute
position.
The parent div has relative
position.
absolute
position will position children elements relative to the parent.
Conclusion
To make element position absolute but relative to parent with CSS, we set absolute
position on the child elements.