Table of contents
Position:
In CSS, there is a property which is Position. Position property is one of the Important properties, which is used to give the position to the elements, contents of our web-page. It is achieving by giving Distances from Top, Bottom, Left, Right.
Types of CSS positions:
There are 5 important positions which are Static, Absolute, Relative, Sticky, Fixed.
- Static:
HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.
- Relative:
An element with position: relative; is positioned relative to its normal position. When we apply relative property we can give the distance like top bottom left right and it will behaves according to its normal position.
In this relative Position we have 4 boxes and we given relative position to second box and given a value top 20px left 20px. So this values behaves according to its normal position.
- Absolute:
The absolutely positioned element is positioned relative to its nearest positioned ancestor. If a positioned ancestor doesn't exist, it is positioned relative to the initial containing block. which is the containing block of the document's root element.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
- Fixed:
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.
- Sticky:
An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position : fixed).
If we give sticky position and when we scroll down the content on which we applied sticky it will stick accordingly where we want.
We learned lot of CSS position which are important. Hope you understand.
Thanks for reading....