CSS Positions

I am as a beginner faced a lot of difficulty in understanding the Position property in CSS. Today in this doc I will be explaining Positions in a very friendly and easy manner. So, lets begin.

What is position property?
As the name suggest Position is a property in CSS to set the position of an element.
It has 5 values and they are :

• static
• relative
• fixed
• absolute
• sticky

now again a question arises that is why should we use this is position property?

And the answer is that, after specifying the position property you can use four more properties i.e top, bottom, left and right, which will again help you better to shape your elements to enhance your frontend.

Note: you cannot use these four properties (top, bottom, left, right) directly before specifying the position property. Using them directly without specifying position will be of no use.

Now, we know that what is position property and why should we use it. Now lets quickly jump to those five values and try to better understand them.

1. static

position: static;

now, static is the default position property, it positions your element according to regular flow of the dom.
(Note: top, bottom, left, and right won't work with static)

Now you know why without defining position property you cannot use top, bottom, left and right. (As if you have not defined the position, the browser will set it to static (default behavior) and top, bottom, left, right won't work with static)

Gist: static is the default behavior of the browser.

1. relative

position: relative;

relative works relative to the normal position of the element.
I know you didn't understand. Lets take up an example.
Suppose you created a div and set its width and height. Now,

position: relative;
left: 50px;

after applying these two lines in the css of your div, you will find that your div is shifted by 50px from its left. Now this is what means relative to the normal position. Once again, if you apply

top: 100px;

you will see that your div shifted by 100px from its top.
I hope now you get the clear idea.

1. fixed

position: fixed;

Fixed and relative and totally similar, but the only difference is that the relative position the elements from its normal position while fixed sets the position in relative to the browser window.
Eg.

position: fixed;
left: 5px;

after applying this css your div will move to a distance of 5px from the left of your browser window.
and the important thing is that it won't scroll with your webpage. It will get fixed to that position.

But suppose you want to fix the position with respective to browser window but at same time you want your div to get scroll with your page. How do you do this, as if you will apply position fixed property it won't allow your div to get scroll.

Now, here comes the concept of position: absolute.

1. absolute

position: absolute;

There are two difference between absolute and fixed.
a. The first one is fixed doesn't allow scroll but absolute does.
b. And the second one is absolute works with the nearest positioned ancestor. Means that fixed sets your element with the respect to the dom window, while absolute sets your div to the nearest ancestor(parent) element who has its position set. But what if there is not parent element with position property, then it will set your according to dom as like fixed but it will still allow scroll.

1. sticky

position: sticky;

sticky is same is fixed the only difference is it sets the property when ever the element gets out of the window on scrolling.

So, this was all about the position property. Hope you get some knowledge after reading this doc. Thank you.

Comments

[AminDannak]

Good job. A few visuals could have made it even better

[Avinash Gupta]

Thank Amin, I will be including images in my next post, thanks for the suggestion.

[Nweke Kelechi]

I have a little problem with positioning
After designing this project of mine though am a beginner I noticed the when I resize the screen most of text will move out of it's original position

[Avinash Gupta]

Have you fixed the size (width, height) of your div ??
If yes don't fix the size of your div instead change it to fit-content.
And also,
*{
box-sizing : border-box;
}
add this line in your css