Have you ever happened to use rather play with position property? If the answer is YES, you must have understood the use of the word ‘play’ in the previous sentence.
You must have seen element(s) dancing in the window or playing hide-n-seek, as you change the values of position property from relative to absolute,absolute to fixed and so on, in dev-tools.
In order to enjoy the dance of these elements or play hide-n-seek with them, you need to know some of the basics of dancing or the rules of hide-n-seek.
Let’s dive into the details.
Before we begin, an important question is WHEN to use position property? The answer lies in the name of the property itself position. Every element you specify has its own default (static) position in the document. If you happen to position the element in a different way from its default position you must use position property.
We have got an answer to WHEN to use position. Now the next question is,WHERE to position the element? By where I mean, 45px from top or 45px towards left or 45px from bottom or 45px towards right. By now it is clear that-
Only position property is not sufficient to position an element. The top, right, bottom and left properties specify the position of positioned elements.
Confused…! If these properties specify the position of elements then what does position property specify?
Let’s answer it this way. If someone says, I have placed (positioned) some object at a distance of say 45 units. Obviously, your immediate question will be 45 units from what, where? Which means knowing only the distance doesn’t help you need to know the reference with which the distance is measured. position property tells you rather decides the reference.
position answers the questions HOW the element is positioned w.r.t. the reference and WHAT is the reference? Is it relatively positioned or absolutely positioned or is it fixed w.r.t. reference.
Permissible values for position property:
static
relative
fixed
absolute
Below fiddle will make things more clear as you read.
It gives the element its default position. top, right, bottom and left have no effect if element is statically positioned.
If the element is relatively positioned then reference is its default (static) position. top, right, bottom and left can then be used to position it w.r.t. its static position.
Relatively positioned elements are in the normal flow of the document and they do take up space while placing other elements.
This would be more clear once we discuss absolute value.
If the element is positioned as fixed, then the reference is view-port or rather window. top, right, bottom and left can then be used to position it. Once the element is fixed it will not leave its position even if you scroll.
If the element is absolutely positioned then reference is its nearest positioned ancestor element.
Absolutely positioned elements are taken out of the normal flow of the document and they do not take up space while placing other elements.
This means if in below example, one more element say #7 is added after #6, it would be placed exactly below #5 and to the left of #6 and not after #6 because #6 is absolutely positioned and so it doesn’t take up space. Check out this demo. If you just position the #6 element as static, all of them would be placed one below the other. Check out this demo.
Now, are you ready to dance and play with the elements ? If YES, go dance and play.
