CSS Position Property Explained With Example
Tags: webdev, tutorial, css, beginners
Published: 2022-07-07 15:31:11

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**.

{% codepen https://codepen.io/rajd0412/pen/PoeKYGX %}

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.

{% codepen https://codepen.io/rajd0412/pen/zYjjeOE %}

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.

{% codepen https://codepen.io/rajd0412/pen/MWGGvmK %}

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.

{% codepen https://codepen.io/rajd0412/pen/qBYKWvw %}

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.

{% codepen https://codepen.io/rajd0412/pen/PoeaoGp %}

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**.