QR Code Component Web page using HTML and CSS
Design comparison
Solution retrospective
I have made this web page, but i am facing difficulty in understanding the concept of "position, relative, absolute etc..."
Community feedback
- @correlucasPosted about 2 years ago
๐พHello HAMMAD AHMED, congratulations for your solution!
The best way to build this solution is using flexbox, I know that you did this using
position: relative
but is the quickest way and gives you also more control.Answering your question:
1.An element with position: relative; is positioned relative to its normal position.
2.An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
When you add
position: absolute
to an element one element, for example the container, and addposition: relative
to other element this means that all changes you apply usingtop left bottom right
will be using the element withposition relative
as reference, for example, if you puttop 200px
this means that theabsolute
element will have 200px far from the top of the element .Here's a good guide to understand these concepts:
https://www.w3schools.com/css/css_positioning.asp#:~:text=An%20element%20with%20position%3A%20relative,gap%20left%20by%20the%20element.
Keep it up bro!
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