position:absolute

Overview

To design and understand the page layouts, we need to understand the position property in css. An element is said to be positioned, when its position attribute is set.

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

The default value for the position attribute is static.

This post is one of the posts in the series of posts to understand the position attribute in css. Make sure to read all of them to fully understand the position attribute.

An element on DOM can be categorized in one of the following categories :

position : static || relative - element is in the normal document flow.
position : absolute || fixed - element is absolutely positioned.
float : left || right - element is floating. Learn More about floats.

Getting started

position:absolute does not cause the element to occupy the space in the normal document flow. Instead, position it at the specified position relative to its closest positioned ancestor or to the containing block. We are rendering two colored rectangles and they occupy their respective real-estate on the document. As they are block level elements, they render one after the other. [codepen_embed height="268" theme_id="0" slug_hash="XXpWwz" default_tab="result" user="kavitshah8"]See the Pen positionAbsolute1 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

If we apply, position:absolute to red rectangle then it does not occupy any space on the DOM. Hence, green rectangle is overlapping with the red ones. [codepen_embed height="268" theme_id="0" slug_hash="wMgvLa" default_tab="result" user="kavitshah8"]See the Pen positionAbsolute2 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

Now, if we add blue rectangle to the DOM, it will be rendered in the second line. Because the green rectangle has occupied the first row. [codepen_embed height="268" theme_id="0" slug_hash="MKJWMo" default_tab="result" user="kavitshah8"]See the Pen positionAbsolute3 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

Check out James Williamson's excellent tutorial on Absolute Positioning !

[youtube https://www.youtube.com/watch?v=ZknvPkpqJdM]

Finally, if we apply position:absolute to green rectangle then it will be rendered on top of the red rectangle. And no one is occupying the first row. Hence, blue rectangle will be rendered in the first row behind red rectangle. [codepen_embed height="268" theme_id="0" slug_hash="XXpWLV" default_tab="result" user="kavitshah8"]See the Pen positionAbsolute4 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]