CSS Positioning ?

The CSS position is used to align the elements on the specified position. Some complex elements on our webpage can be placed in a specific position. The top, right, bottom, and left properties helps us to place element. By default all the elements are in static position.

Types of Positioning

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

- Static Position :

All the HTML elements by default are in static position. The static positioned elements are not affected by the top, bottom, left, and right properties.

- Absolute Position :

When the element has absolute position it moves from the document body. If the element has a parent element then it moves from the parent element. Here the blue box has changed it position to 500px from the left and 20px from the top with respect to document body and the space between red and green box is affected.

- Relative Position :

When the element has relative position it moves from how it moves from its current position. When you move an element that has a relative position, it doesn't affect the position of anything else on the screen. Here the blue box has changed it position to 500px from the left and 20px from the top with respect to where it was before and the space between red and green box is not affected.

- Fixed Position :

When the element has fixed position it gets fixed in the webpage and no matter if you scroll the webpage it still remains at the same position specified. Here red box is fixed and it is not affected if the webpage is scrolled.

- Sticky Position :

When the element has sticky position it waits until the specified position is reached and then it sticks at that position.

That's the end of this blog. I hope the article was interesting and knowledgeable. See you guys in the next one.✌