There are five types of position property :

• static
• relative
• absolute
• fixed
• sticky

static: Static positioned elements are not affected by any attribute like top, bottom, left, and right. It is the default position of HTML elements.

relative: It is used when we need to position an HTML element relative to its normal position. We can set the top, right, bottom, and left properties that will cause the element to adjust away from the normal position.

absolute: An element with the absolute position will move according to the position of its parent element. In the absence of any parent element, the HTML element will be placed relative to the page.

fixed: An element with position:fixed; will remain stuck to a specific position even after the page is scrolled.

This position property is used when we want to keep an HTML element at a fixed spot no matter where on the page is scrolled.

sticky: Sticky is similar to fixed position, A sticky element toggles between relative and fixed, depending on the scroll position