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