The position property specifies where an element should be placed on the page.Initially, it is static, you can use it on any element, but it cannot be animated.
position: static | sticky | absolute | fixed | relative
✰ It defines the default position of the element. Positioned elements are elements whose placement has changed from being
static to one of the four possible positions: absolute, relative, fixed, and sticky.
✰ In relative position, elements are positioned along with the normal flow of the page and offset based on values for top, right,
bottom, and left. It occupies the same space on the page as if it were static since its offset does not affect other elements.
✰Elements are positioned relative to their first positioned ancestor. Components with no descendants are positioned relative to
the first containing block. Ultimately, its position is defined by its top, right, bottom, and left values.
✰ Elements are positioned relative to the viewport. It behaves like an absolute positioned element in that it is detached from the
page's flow and no longer affects the layout. It won't scroll up when you scroll down. Fixed headers are one example.
✰ It is a hybrid of a relative and a fixed positioned element. ✰ Sticky elements switch between fixed and relative positions based on scroll position. Its position is relative until the offset position occurs in the viewport. After the offset position comes into the viewport, it stays in place like a fixed positioned element.
