DEV Community 👩‍💻👨‍💻

Cover image for CSS Positions
Avinash Gupta
Avinash Gupta

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

  1. fixed
position: fixed;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
amindannak profile image
AminDannak

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

Collapse
 
tier3guy profile image
Avinash Gupta Author

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

Collapse
 
nwekejohnson4 profile image
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

Collapse
 
tier3guy profile image
Avinash Gupta Author

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

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.