The position property can help you manipulate the location of an element.

The "position" property is used to specify how an element is positioned within its parent container.

There are mainly 5 types that we frequently use in CSS code

1. static:

   Every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element.

   Here in this example, 4 have the same position by default which is static in our position they are scrolling as we are scrolling.

2. relative:

   An element’s original position remains in the flow of the document, just like the static value. But now the left/right/top/bottom/z-index will work. The positional properties “nudge” the element from the original position in that direction.

   The observation here is that BOX-4 did not toward the left and BOX-3 can move the top bottom right left in relative it is going to behave from the origin position.

3. absolute:

   the element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.

   The observation here is that BOX-4 moves toward the left and BOX-3 can move the top bottom right left in absolute.

   "absolute": With this value, the element is positioned relative to its nearest positioned ancestor, if any; otherwise, it is positioned relative to the initial containing block (usually the viewport). You can use the "top", "right", "bottom", and "left" properties to specify the exact position of the element.

4. fixed:

   The element is removed from the flow of the document like absolutely positioned elements. They behave almost the same, only fixed-positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.

5. sticky:

   The element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.

   combination of "relative" and "fixed"

GIT HUB https://github.com/ranjeet7287/FullWDStackPerp/tree/main/06_CSS_CLASS_PART_2

Linkedin

https://www.linkedin.com/in/ranjeet-singh-71b68a239/

Email

sranjeet434@gmail.com