Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons



To design and under­stand the page lay­outs, we need to under­stand the posi­tion prop­erty in css. An ele­ment is said to be posi­tioned, when its posi­tion attribute is set.

 position : relative || absolute || fixed || sticky (experimental);

The default value for the posi­tion attribute is sta­tic.

This post is one of the posts in the series of posts to under­stand the posi­tion attribute in css. Make sure to read all of them to fully under­stand the posi­tion attribute.

An ele­ment on DOM can be cat­e­go­rized in one of the fol­low­ing categories :

  • posi­tion : sta­tic || rel­a­tive — ele­ment is in the nor­mal doc­u­ment flow.
  • posi­tion : absolute || fixed — ele­ment is absolutely positioned.
  • float : left || right — ele­ment is float­ing. Learn More about floats.

Get­ting started

position:absolute does not cause the ele­ment to occupy the space in the nor­mal doc­u­ment flow. Instead, posi­tion it at the spec­i­fied posi­tion rel­a­tive to its clos­est posi­tioned ances­tor or to the con­tain­ing block.

We are ren­der­ing two col­ored rec­tan­gles and they occupy their respec­tive real-estate on the doc­u­ment. As they are block level ele­ments, they ren­der one after the other.

See the Pen positionAbsolute1 by Kavit Shah (@kavitshah8) on Code­Pen.

If we apply, position:absolute to red rec­tan­gle then it does not occupy any space on the DOM. Hence, green rec­tan­gle is over­lap­ping with the red ones.

See the Pen positionAbsolute2 by Kavit Shah (@kavitshah8) on Code­Pen.

Now, if we add blue rec­tan­gle to the DOM, it will be ren­dered in the sec­ond line. Because the green rec­tan­gle has occu­pied the first row.

See the Pen positionAbsolute3 by Kavit Shah (@kavitshah8) on Code­Pen.

Check out James Williamson’s excel­lent tuto­r­ial on Absolute Positioning !

Finally, if we apply position:absolute to green rec­tan­gle then it will be ren­dered on top of the red rec­tan­gle. And no one is occu­py­ing the first row. Hence, blue rec­tan­gle will be ren­dered in the first row behind red rectangle.

See the Pen positionAbsolute4 by Kavit Shah (@kavitshah8) on Code­Pen.

Fur­ther reading

Mozilla Devel­oper Networks

You may also like...