Cascading Style Sheets (CSS) play a crucial role in web development, allowing web developers to control the layout and appearance of websites. One of the fundamental concepts in CSS is the positioning of elements on a webpage. In this blog post, we will cover the different CSS positions.
Static refers to the default positioning of elements in your web page. It follows the flow in which the elements are added and is not affected by the left, right, top, or bottom properties.
When using relative positioning we won’t notice any change right off the bat and it looks very similar to static. However you can set the top, bottom, right and left values which will move the element relative to its original position.
Reserves the original space occupied by the element even if we move it around and other elements in the page aren’t aware of the relative positioning hence they won’t adjust according to the new position of the element leading to overlap sometimes.
Apart from moving an element relative to its original position another use case to use relative positioning is when we want to stack elements using z-index.
In absolute positioning the element is taken out of the web page flow and in turn the original space is not reserved unlike relative.
It aligns itself relative to the main web page viewport. However when you have a parent element set to relative it will align itself according to the parent bounding box. In general absolute positioning looks up the element hierarchy and aligns itself relative to an element with a position set to relative.
Absolute positioning is commonly used to control the positioning of an element relative to another element than to the entire web page viewport.
Since they aren’t in the web page flow they take the exact size of the content. For example, if you have a text it will take up space only till the end of the text. You can use absolute positioning for setting the z-index.
Elements with position set to fixed align themselves to the web page viewport with the help of left, right, top and bottom properties. They do not align themselves relative to any other element in the web page.
It is no longer part of the document flow and as you scroll through the web page, the element remains fixed to the position you have set it at. A few use cases include displaying a banner at a position at all times, or for a pop as the pop up needs to be visible as you scroll unless you close them.
Position fixed also lets you stack elements using z-index.
If you have a nav bar, and you set it to fixed then the section below goes inside the nav bar, whereas with sticky (top value set to 0) the section below won’t tuck down. The reason being with fixed positioning the element is out of the web page flow which the other elements aren’t aware of so they shift as they usually do when you scroll.
Sticky positioning doesn’t break the flow of the web page and stays within the containing parent element even if it is not set to relative. Since they take up space the elements following it are pushed. However when you scroll you will notice the elements are visible through the sticky element, this can be fixed by setting the z-index of the sticky element to a high value.
You can control where you want an element to stick using the top, bottom, left and right properties.
I hope this blog post was useful to you and helped you understand the difference between the 5 CSS positions. Thank you for reading and have a great day.
