Design comparison
Solution retrospective
I tried to add the little orange box with :after and :before, but it didn't work 😕...
Any tips for improvement are very appreciated!
Community feedback
- @szloeuPosted over 1 year ago
Hi Anahita, you can place the orange box with absolute positioning. An element with "position: absolute;" is positioned relative to the nearest positioned ancestor.
<div class="relative"> <div class="absolute"> </div> </div>div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; }
div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; }
You can set the absolut position with left, top, right, bottom values.
I hope you can use my advice.
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord