Understand CSS position property in a Funny manner

The position Property

The position property specifies the type of positioning method used for an element. There are "Five" different position values:

• static
• relative
• absolute
• fixed
• sticky

Elements are then positioned using the top, bottom, left, and right properties.

Let's start learning by practical use case, are you excited? 😁

position: static;

By default, HTML elements are always positioned statically. When an element is given the position static, nothing happens. The position of that element remains the same. Let's understand it With an Example.

You can see that style.css file by sliding that white verticle line which is on the code sandbox left side swipe that to the right.

Now you can see that after applying static position to the red and blue boxes nothing happens. although I apply left: 80px; to blue(this should have moved the element 80px away from its default position) still that box is in the same position.

position: relative;

An element with position: relative; is positioned relative(connection to something else.) to its normal position. When we give position: relative; without any coordinate properties, i.e; left, right, top, bottom, the element stays in the same position, and nothing changes.

Now see the above example we apply position: relative; to the red box and left: 100px; so it moves to the right side relative to its original position. And we apply left: 100px; to blue but give position: static; nothing happened.

position: absolute;

Let's understand the absolute position. it is Lil tricky but need not worry I am here 😎

When an element is given a position: absolute; the element will be taken out of the normal document flow. If the parent container that is containing the child element is not given a position of relative i.e (parent container, position: relative;), then the child element that has been given a position of absolute, will take a reference point from the body of the web page, and not the parent element containing the child element.

Without the parent container element having a relative position, you can see that the red box that has been given a position of absolute, takes a reference point from the body of the web page. It moves 20 px away from the left taking reference to the web page, not from the container.

Below, is an example of when the parent container is given a position of relative. You will notice that the child element (the red box with a position of absolute) now takes a reference point from the parent container and is no longer taking its reference point from the body of the web page.

From the above example, we can see clearly that after giving position relative to the container. the red box moves away left 20 px by taking reference of container not of the web page.

position: fixed;

Does exactly what it says on the tin The name of this property is very appropriate to this property. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

You can see the red box is fixed at one position after scrolling to the page because we apply the position fixed to the red box.

position: sticky;

The position: sticky; let's understand it peacefully.🧘🧘 Just remember one thing sticky position and coordinate value work hand in hand. for example

As you open the CSS file of this example you will notice that I apply top: 0; to the navbar you will wonder why I apply this but CSS works like this my friend if you don't apply top: 0; then your position: sticky; won't work and you feel frustrated that why it is not working. Give it a try without top property. this is how CSS works like my friend.

Conclusion

A quick recap of the article. we understand how many positions are there in CSS. We talked about that position property deeply with examples. their various behaviors on the web page, and how they are used to position elements. Just in case you had a tough time battling how to use these position properties, I hope that this article is useful to you, to help understand the topic better.

If you have any questions, you can leave them in the comments section below.

Happy Coding.

ByBy