We've got a property that is really useful but also can be very confusing to beginners or to everyone. The property name is Position. It's kind of just like a generic sounding property, in my opinion. It doesn't tell you a whole lot, and the property values that we can use are things like static, relative,absolute, fixed, sticky. They are easy to confuse. That might just be my experience, but I've seen lots of students have to refer to the docs for this property.
Introduction
The CSS Position property sets how an element is positioned inside a document. The top,right,bottom and left properties determine the final location of positioned elements.
Static Positioning :
The default positioning mode that you’ve gotten used to is position: static. Static is the default position of every element, and properties top, right, bottom, and left do not affect the position of the element. Lets see in the pen below
Relative Positioning:
Unlike on the other hand Relative is pretty much similar to static, but properties top,right,bottom,left displace the element from its normal position in the flow of document. Lets see in the pen below
Absolute positioning:
This is very powerful type of positioning that allows you to literally place any page element exactly where you want it. you use positioning attributes top,right,bottom,left to set the location. This property is really useful when you want to position something at an exact point on the screen, without disturbing any of the other elements. A couple of good use cases for absolute positioning are modals ,image with a caption on it ,icons on top of other elements. using absolute positioning on an element will remove that element from the normal flow while being positioned relative to its parent element. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relative to the page itself.
In the following example, we are using absolute positioning to display text over an image.
Fixed positioning:
Fixed elements are also removed from the normal flow of the document and are positioned relative to the viewport. You basically use top, right, bottom, and left properties to position it, and it will stay there as the user scrolls. This is especially useful for things like navigation bars and floating chat buttons. Lets see in the pen below
Sticky positioning:
Sticky positioning is really unique! A sticky element will just sit there like a static element, but as you scroll past it, if it’s parent element has room (usually: extra height) the sticky element will behave as if it’s fixed until that parent element is out of room. It sounds weird in words like that, but it’s easy to see what’s happening in a demo in pen below
Conclusion
I hope this article has helped you understand positioning in CSS better. KeepLearning 😃. Okay That's it I am Going Away Bye 👋🏻 😆.