How does the position value work in CSS?

Absolute, Relative, Static, Fixed.

How are they different from each other? All the words seem to mean the same thing! How will I ever lay out my website if I cannot even understand this basic concept!! What is the meaning of life???

Please, do not fret. Do not question your self worth. Let’s break this down. By the end of the article you will understand each and every positioning value in CSS.

The first cause of confusion perhaps is that we do not use the position property to create the basic layout of a website. For that we use the float property or the newer flexbox property.

Positioning targets how the element understands its order in relation to the other elements on the page. By default, if you lay out a list of elements in html, they will appear in that order in the browser. This is position:static.


position:static

Every element’s default position is set to static. No need to worry about this one. This is simply the name for the way the elements normally behave. They follow each other in order based on their block or inline display status.

You cannot use the top, bottom, left, right properties if the element is static. I mean, you can try. But it will not listen.

Static is the well-behaved student that follows the letter of the law to a T.


position:relative

When you declare an element’s position as relative, you are telling it where to be in relation to where it is supposed to be in its former static positioning. Declaring position relative allows you to use the top, bottom, left properties to change the elements position in RELATION to where it used to be. The space that would have taken up is still observed.

Screenshot 2016-01-24 21.00.17

Relative is the rebel who learns the rules in order to break them. And who always has a seat saved for them at lunch.

Because it is such a bad-ass, position:relative has one more use that we will get to as we discuss position:absolute.


position:absolute

Now here is where things get interesting. As soon as you declare an element absolute, it moves forward onto its own plane and does not take up the space it used to in the line up.

Screenshot 2016-01-24 21.07.50

But.. wait! You can see that Box 2 is the element that is positioned absolute, so where-the-heck did Box 3 go?  Box 3 is there!  They are just being covered by the self-important, position:absolute Box 2.

Screenshot 2016-01-24 21.12.53

Keeping consistent with this position’s snobbery, in order to move an element that is position:absolute, we have to tell it what it is moving in RELATION to. This is where position:relative comes in.

Picture this, the position:absolute element gets a promotion and realizes that it doesn’t have to stand in line with the plebeian static elements. But because of its big head, it thinks that it was promoted all the way to CEO (or in our case, all the way up the chain to the body tag) unless we tell it otherwise.

Screenshot 2016-01-24 21.31.29.png

We can fix this by declaring Box 2’s parent element to be position:relative. We can choose which parent element we want the element to position itself in RELATION too.

Screenshot 2016-01-24 21.39.35

Absolute is the stuck up kid who skipped a grade and now won’t eat lunch with their old static friends. They need Relative to bring them back down to earth.


position:fixed

An element that is position:fixed leaves the line up the same as position:absolute, but it takes it to the next level. A fixed element positions itself in relation to the sides of the browser window.

Screenshot 2016-01-24 21.50.08.png

It couldn’t care less what is happening underneath it. It just does it’s job and stays in the position on the screen. However, it will respond to z-index, so although its position is fixed, it can be overlapped by other elements.

Fixed is the home-schooled kid doing his own thing outside of the social order of all the other elements.


 

So, to review:

Static: The well-behaved rule follower, always lining up properly.

Relative: The rebel, cool kid who learns the rules in order to break them. They always have a seat saved for them and when Absolute comes along they put them right in their place.

Absolute: The self-important grade skipper who is too good for lines that needs to be brought down to earth by Relative.

Fixed: The oblivious home-schooler marching to the beat of their own drum..or browser window.

There! Now you can breathe a sigh of relief.