CSS position property allows you to position elements on your web page in a specific location. You can use it to move elements from their default position or to place them relative to other elements on the page. There are five different values for the position property: static, relative, absolute, fixed, and sticky.

Syntex:

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

Static Position

Static is the default position value. If you don't specify a position property, the element will be placed in the normal document flow, and you won't be able to move it from its default position.

Relative Position

Relative positioning allows you to move an element relative to its normal position on the page. It doesn't affect the layout of other elements on the page. The element will still take up its normal space on the page, and other elements will still be positioned as if it was in their normal position.

Absolute position

When you set an element's position to absolute, it is positioned relative to the nearest positioned ancestor element. If there is no positioned ancestor element, then it is positioned relative to the initial containing block, which is usually the body element.

Fixed position

Fixed positioning is similar to absolute positioning, but the element is positioned relative to the viewport instead of its nearest positioned ancestor element. This means that the element will stay in the same position even when the user scrolls the page.

Sticky position

Sticky positioning is a combination of relative and fixed positioning. The element is positioned relative to its normal position on the page until the user scrolls past a certain point, at which point the element becomes fixed to the viewport.

All the code examples are from MDN docs

Some other properties

Now that you know about the different position values, let's look at some other properties that you can use with them.

Top, right, bottom, and left

These properties are used to specify the position of an element relative to its nearest positioned ancestor element. They are used to move an element up, down, left, or right from its normal position.

Z-index

The z-index property is used to control the stacking order of positioned elements. An element with a higher z-index will appear on top of an element with a lower z-index.

Overflow

The overflow property is used to control what happens to content that overflows the boundaries of an element. It can be used with any position value.

Conclusion

the position property is a powerful tool in CSS that allows you to position elements exactly where you want them on your web page. By using the different position values and other properties like top, right, bottom, left, z-index, and overflow, you can create complex layouts and designs that look great and function well.