DEV Community

Cover image for The CSS Position Property
Shuvro_baset
Shuvro_baset

Posted on

The CSS Position Property

In css the most confusing part is position property. But we should have clear concept about these. Now I will try to clear these concepts below.

The types of positioning in CSS are static, sticky, fixed, relative, absolute
Static: Static positioning is the default for every HTML element. In fact, there’s not much that you can do to change it. It won’t be affected by certain properties that can make an impact on other CSS position types. No matter what value you associate with top, right, bottom, and left properties, they will not change, and neither will the z-index property.

Sticky: It's not relative or not a fix position. It's depends on user scrolled on the web page. it behaves like a relative value element until the viewport meets a specified position — then it gets "fixed" in a spot.
Fixed: If we use fix position of any div it will not change. It will be set in that position where we set if the webpage scrolled but that will not change the position.
Relative: Normally it set into a normal position. But we can change the position according to the body. And we can also use relative position when we want to change another property position according to this div. More will discuss in the absolute position part.
Absolute: Absolute position depends on others elements. It changes by respect to it's parent element. If there is no parent element then it will consider the body as it's parent and change the position according to parent.

Top comments (0)