Position
The position CSS property is used to specify where a certain target should be placed inside the document. The position of the target on the page will be determined by four properties, top, right, bottom, and left, which may be used by specifying the property position. After setting the position property value, which determines the element's behaviour, we set the other property values in accordance with the specifications.
Types of CSS Positioning
The position property specifies the type of positioning method used for an element.
There are five different position values as follows:
Static
HTML elements are positioned static by default. The top, bottom, left, and right attributes have no effect on items that are static in their positions.
Relative
All of the top, right, bottom, and left properties will be applied from the targeted element's initial position when the relative property is used. The element's initial position is regarded as its parent position, and all other characteristics take into account the targeted element's initial position when they take effect.
Absolute
When we use this property value, the targeted element will be positioned in accordance with the display size, and any applied heights will be determined from the corners of the display size. View the illustration to get an idea. Keep in mind that as soon as you begin scrolling, the location on the screen won't remain static.
Fixed
The element targeted will be fixed to the screen when this property value is applied to it. It will be stuck on the screen and removed from the usual flow. The screen's top, right, bottom, and left values will be taken into account; the other components are unrelated. An excellent example is offered below. To observe what the fixed is doing to the element, scroll the screen.
Sticky
Let's examine how fixed and sticky vary from one another as there is a lot of misunderstanding about them. When we apply sticky to an element and provide values for the top, right, bottom, and left, the element will be out of the flow and remain stuck, however, if it were fixed, it would always be connected to the screen. To fully grasp the concept, consider the example below.