Nothing has puzzled me more than a CSS position. I couldn’t figure out what CSS position means – absolute, relative, static, fixed, etc. How all of these really works? The moment I felt that I have now learned enough and started experimenting with layouts, I would fail miserably. The only way to overcome this problem was to experiment and learn as much as possible.
Instead of focusing on building complex layouts, I started with baby steps. I first created a simple div inside a body element.[codepen_embed height=300 theme_id=1 slug_hash=’MdmXVd’ user=’carbonrider’ default_tab=’html’ animations=’run’] See the Pen CSS default position – static by Carbonrider [/codepen_embed]
Inspect the div tag and tick “show all” checkbox in the computed tab. You will realize that the position of the div is static. This is the default behavior for HTML elements.
Now let’s tweak a position property and make it absolute. Also, we will change the left and top property so that we can see the effect.[codepen_embed height=300 theme_id=1 slug_hash=’RmgMxy’ user=’carbonrider’ default_tab=’html’ animations=’run’] See the Pen CSS position – Absolute by Carbonrider [/codepen_embed]
The div has shifted from its original position, it is 10px away from its left & top position.
There is more going on than just shifting the original position of the div. Absolute positioned element has the following effects
- The element is removed from the Document flow. Any siblings following to the absolute positioned element will ignore its presence and position themselves as the element doesn’t exist.
- Absolute position element is placed at the absolute position of the parent having position property other than static. If its immediate parent has a default position or static, a search will begin to locate the next level parent with a non-static position.
These rules are quite tricky. I spent too much of time debugging layout issues, only to realise the fact that I was not following the rules. Let me explain each of these rules with an example.
I created a set of Div with display as inline-block (block vs inline-block that’s going to be another topic and believe me it is very interesting).[codepen_embed height=300 theme_id=1 slug_hash=’dERmQm’ user=’carbonrider’ default_tab=’html’ animations=’run’] See the Pen CSS position – Absolute by Carbonrider [/codepen_embed]
All the Div in this example are defined as “inline-block”, while the second div has been positioned absolute. Notice what happened with 3rd Div, it isn’t even aware that there exists the second Div. The 3rd div takes the position of 2nd div and aligns itself smoothly with others.
Here is what happens, if I change the position from absolute to relative.
Remember, I said our Divs are displayed as inline-block. If we will reset them to default display (block for Div) and absolute positioned Div, the layout will change like following.
Got an idea – why inline-block are different than block display. Anyways thats not the topic of discussion. We are trying to understand how Absolute positioned element will affect the document flow.
Absolute position works for non-static parent
OK, that heading is too big, but the point is – To make sure that the absolute positioned element to behave properly, you must set the position property of the appropriate parent to other than static. Check the following example.[codepen_embed height=300 theme_id=1 slug_hash=’ZNyozL’ user=’carbonrider’ default_tab=’html’ animations=’run’] See the Pen CSS position – Absolute by Carbonrider [/codepen_embed]1
It seems something is off. The absolute positioned Div is not behaving properly. It is supposed to be absolute positioned to it’s blue Div parent but it’s not. Well, that’s what the rule is. The Absolute Div is looking at its ancestors which is non-static and it will align itself to the position of that non-static parent. Unfortunately, there is none till the actual document BODY and hence the Div has been positioned absolutely to the BODY.
Set the position of blue Div to relative and you should see following screen.
I hope this article has helped you to gain the basic rules of how absolute positioning works inside browsers. The rules are pretty simple – Just make sure that you practice the examples described above and life should be easy.