CSS Position Absolute

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.

Baby Steps

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.

Default position for a HTML element is static.

Position Absolute

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.

Important Rule

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.

Document Flow

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.

Div 3 takes position of Div 2.

Here is what happens, if I change the position from absolute to relative.

Relative positioned Div.

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.

Div with default display property (block)

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
That red Div seems to be bit off!!!

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.

Absolute position Div behaves well with non-static parent.

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.

By Carbon Rider

Hi this is Yogesh, welcome to my world. Being passionate about learning new technologies and building frameworks, I end up spending most of my time in front of computer. But over last few months, I realised apart from being good coder and designer (Yes I am) I have something hidden in me. And thats called ART.

Leave a Reply