Design comparison
Solution retrospective
Any suggestions on how I can improve (especially in terms of positioning elements because that was a bit of a struggle for me 😅) are welcome! :)
Community feedback
- @itushPosted over 1 year ago
Congratulations on completing the challenge! 🎉
Your solution looks nice to me.
It is important to correctly understand CSS Position property to render HTML elements as per the requirement. I remember struggling in my initial projects, since I didn't understand it correctly😁 Please note:
-
By default, all HTML elements are static (non-positioned elements).
-
By using top, right, bottom, left we can control the final location of an HTML element.
-
Top, right, bottom, left, z-index don’t have any effect on Statically positioned / non-positioned elements.
-
So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.
You may checkout 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow etc. in a simple way.
I hope this helps.
Keep at it...💻 Happy hacking!
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