CSS Position Property Explained With Example

CSS has a fascinating property that is used to position an element, and it is called the position property.

There are five different types of CSS Position Properties.

1. Static
2. Relative
3. Fixed
4. Absolute
5. Sticky

You can set the position of any element using the top, right, bottom, and left properties. The positioning property specifies the distance of an HTML element and entity from the edge of the viewport. We must declare the position property to set the position of any HTML element.

Let's talk about how each position's property works. In details:

Static

The static position is the default value for all HTML elements. By defining Position: Static to the Top, Bottom, Left, and Right have no control over the element.

The element is always positioned according to the normal flow of the page. This means the HTML element is always position: static.

Let's Use this as an example and see how its works in actual code. We have three div elements, red, green, and blue, and we set the position: static to blue and left:100px, but we can't see any changes in our browser.

Relative

Elements can be positioned relative to their normal position using the position: relative property.

This is the same as static, but unlike static, you can change the position using the top, bottom, right, and left according to your requirement.

So, Let's change the blue box position: relative and left 100px. Now you can see the changes in the blue box.

Fixed

Using the position: fixed attribute, we can fix any HTML element in a particular position on the viewport.

Even when you scroll the page, you will never see any movement in that element whose position is fixed, Because the position property allows it to remain in the same position.

But you can change the position of the element using the top, bottom, left, and right.

In this example, we used a poem on our webpage named Another Time. Let's see what happened. Even though we scrolled the page, nothing happened with the Another Time heading after setting the position fixed.

Absolute

If position: absolute is specified, the element will be positioned relative to its nearest non-static ancestor.

In this case, the positioning of this element is independent of the positions of its siblings or elements at the same level.

position: absolute will cause its position to be adjusted in respect to only its parent. In any case their parent is not available, then it uses the document body as parent.

Now, We change the position of the blue box to absolute and you can see the changes, The blue box is left it's place and accept that place which is defined by the user with respect to the body as a parent.

Sticky

position: sticky is mixture of position: relative and position: fixed. In the case of top: 0 it played a role between fixed & relative based on the position.

When the sticky element is placed in the middle of the document, it scrolls until it touches the top when the user scrolls the document. After reaching the top, it will remain fixed at that position even after further scrolling.

It is also possible to stick an element at the bottom by using the bottom property.

In this example our heading element is in the middle of the page if we scroll the page its acts like position: relative after reaching the top of the page its acts like position: fixed. One more thing, if we do not define top: 0 this will work only like position: relative.