Today I am going to start my series teaching CSS from beginner to advanced.
In this topic I will cover all the position properties in CSS. Position static, relative, absolute, fixed and sticky.
Learn to position elements like a pro!
Quick notes:
â–ª Position static: Is the default position for HTML elements, will not effect anything.
â–ª Position relative: Takes its initial position and can be translated from there on.
â–ªPosition absolute: By default it is positioned relative to its closest ancestor (usually the body tag). If you define position relative on a parent element then it is going to be positioned in that context.
â–ª Position fixed: Rips out the element from the document and fixes it to the viewport.
â–ª Position sticky: Switched between position static and fixed.
~-~~-~~~-~~-~
Follow my Twitter:
https://twitter.com/DevEd94
Please watch: "Should You Become A Software Engineer?"
https://www.youtube.com/watch?v=V_kTl0eIJ4A
~-~~-~~~-~~-~
439 Comments