Many beginner developers, including me, have a hard time understanding CSS Positions and how those work.
There are 5 different positions that could be used and through this post, you will get to know all five of those.
Next to this post, you can also take a look at the video format of this.
Watch YouTube Video → https://youtu.be/W1h18JLL6Yo
Let’s Start.
Static Position
One of the positions that we can define in CSS is Static Position.
Static Position is also mostly already defined on all elements by default.
So, if we would redefine it, we would get just a normal, default behavior of that element.
Sticky Position
Sticky Position is a bit more interesting, as it is based on the user’s scroll position.
If we would use a sticky position on an element and we would specify the value for the top, that element will stick itself to that position while we are scrolling.
Element with Sticky Position is position relative to its scope, until the scroll, or offset positions are met with it, at that point, Sticky Position will serve the role of Fixed Position, outside of its scope.
Relative Position
Using Relative Position on elements will do exactly that, the element will be positioned relative to its normal position.
This is good to use in combination with Absolute Position, as then the absolute element can roam around a relatively positioned parent.
Absolute Position
The element with Absolute Position is also positioned relative to its parent.
This is one of the main reasons why we see those cool sections that are floating one in another, or when we hover over some image, we can see a cool section animated inside, both those examples will use a combination of Relative and Absolute Positions.
Fixed Position
As Absolute Position is relative to its parent, Fixed Position is relative to Viewport of the Browser.
This means that we won’t be able to use Relative Position to specify the scope of the Fixed Element.
If Element with Fixed Position is set to be in a center, it will always be in a center of your Viewport.
Bonus — Z-Index
In one sentence, Z-Index presents an order of overlapping Elements in HTML.
This means that we can have multiple sections that are having Position set to Absolute, Relative, or Fixed overlapping with each other.
Section with Z-Index of 2 will always be in front of Section with Z-Index of 1.
Conclusion
Was this helpful? If the Writing content is not so helpful to you, I also have a video format for this particular tutorial.
Watch YouTube Video → https://youtu.be/W1h18JLL6Yo
Until next time.
