Ever seen a sidebar navigation staying at the side of page while scrolling? Or the header staying at the top while scroll down? Or a footer which stays at the bottom of the page?
I too have struggled to understand how all of this works.
If you've struggled too, then the property used for doing this is position property.
The position property has values as static | relative | absolute | fixed | sticky
Static
- Static is the default value for position property.
- Even if top, bottom, left, right are used it won't effect the normal flow of the document.
Relative
Unlike the position: static, in relative top, bottom, left, right will have the effect on the element.
- The element will remain in the normal flow.
Absolute
When the element is styled with position: absolute it will effect the flow of the document as the elements get removed from the normal flow and space is not allotted for the element. Now top, bottom, left, right play the role to determine where the element should position.
- Also the element is positioned relative to its parent element.
Fixed
Elements when styled with position: fixed will also effect the flow of the document same as the absolute, space will not be allotted for it.
The main difference is that when scroll happens it does not effect the fixed styled element. It will stay in the same position. Also the element will be directly to the element
Sticky
The side bar or the navbar which stick at particular part of the page is because of this position: sticky property. When an element is styled with this, it remains in the normal flow until it reaches the particular scroll point then it gets fixed at that place. So we can say it is a mixture of position: relative and position: fixed
You can check the examples of position at:
Referenced Docs:
Cover image credits: Photo by Pankaj Patel on Unsplash