Position children elements in the parent absolutely using CSS
Sometimes, it might be the case where you want to place/position the children elements that reside insides their parent absolutely.
For instance, if you can notice on the homepage, the first article on the list is labeled as a “NEW” badge on it like so.
Here, the new badge is an SVG icon that lies inside the parent box absolutely and so even though it’s a child of this parent div, I was able to place it outside of its edge.
I’m going to explain how you can achieve this kind of behavior in this article.
Now, let’s say we have a container div with some content and an SVG icon wrapped by it like so.
<div class="container">
<svg width="40" class="icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis felis sit amet laoreet eleifend. Maecenas vel ultricies nibh. Quisque vel mauris id metus mattis accumsan sit amet a nulla. Curabitur sed sodales leo. Etiam vitae pretium arcu, eget interdum odio. Sed nisi velit, facilisis eu dui eu, commodo maximus lectus. Etiam consectetur turpis eu leo suscipit, ac consectetur eros mattis. Nunc sodales tempor ex, in vestibulum turpis feugiat id. Quisque at gravida eros, eu eleifend velit. Proin a imperdiet libero. Proin finibus nunc at justo suscipit varius. Duis eget quam eros. Quisque quis facilisis quam. Nullam sollicitudin nibh lectus, quis egesta dolor vehicula eget.
</span>
</div>
Now, if you want to achieve something like what I have shown previously, you need to do two important things.
- Setting position of the div as
relative.
.container {
position: relative;
}
- Setting the position of the SVG icon as
absolute.
.icon {
position: absolute;
}
Doing so will make sure that the icon inside is positioned relative to the nearest positioned ancestor (in this case the container div) instead of positioned relative to the viewport, like fixed.
Our work is already 80% done.
The only thing now remains is to adjust the icon’s position as per the requirement. In our case, to set it at the top-right corner at the edge of the container. This can be done using the right and top properties like so.
.icon {
position: absolute;
right: 10px;
top: -20px;
}
And that’s all you need to do!
Putting it all together, here’s how the entire example would look like.
See the Pen Floating icon on the div by Amit Merchant (@amit_merchant) on CodePen.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
