Understanding Css Position's

Lets understand how to play with css positions. Css Positions is one of the core fundamental part to learn. Using css Positions we can move element from its own position. It decides the position of element in the document.

There are 5 types of Positions

1. Static
2. Relative
3. Absolute
4. Sticky
5. Fixed

we can set left, right, top, bottom of an element after assigning position to it. Lets Understand each Position in Depth.

Static

This is the default position of any element in html document. The element is positioned as per its normal behaviour. the left , right , top , bottom properties have no effect on the element with default static position.

Relative

After adding Relative position to the element, it behaves like the static flow in the document once we give the top, left, right , bottom it moves from its original space in document without loosing its space.

lets understand it by example

in this example we have given relative position to box2 , after giving left:40px and top:40px it is changing position relative its own position and without leaving it.

Absolute

After adding Absolute position to the element , it changes its position depending on its nearest positioned ancestor element in the document (except static). If there is no positioned ancestor then it behaves based on the body. and then the final position of it is determined by top, left, bottom, right. it does not preserve its own position on the document.

lets try to understand it by example

in this example , we have three boxes adjacent to each other - box1, box2 and box3. after giving absolute to box2 it will change position depending its parent positioned element. In this case , it is changing its position based on ".main_div" as it is nearest positioned parent. Also we can see that it does not preserve its original space , box3 came to left after assigning absolute to box2.

Fixed

The name itself describes the nature of the element in the document. If we add fixed position to an element then it looses its own position and fixes its position on screen depending on top, bottom , right, left value

In easy words , we can say that it stays in the same place even after scrolling the webpage.

lets understand it by example

in this example , we have given fixed position to header , it will stay 40px from top , even if we are scrolling the page.

Sticky

Lets understand Sticky by comparing it with Fixed. People often get confused between fixed and sticky. The main difference between fixed and sticky is that -

Fixed element is stays on its place from start but in case of Sticks the element stays at its original page at start , it gets stick given position once it reaches to that place. Depending on the User's Scrolling it toggles between relative and fixed.

lets understand it by example ,

in this example , initially sticky element is at its own position , its stick to top after reaching 20px from top (because we have given top:20px) and similarly it toggles between original place and sticky position.

The article ends here. Hope you enjoyed reading this articles. I have tried to explain Css Positions in easy way giving example. Please suggest if any improvement is needed. Happy Learning....!!! Thank You.