CSS Position

position: absolute;

The above box has position: absolute;

The div.absolute element is taken outof the normal flow of document.

Then the element is placed in it's original position unless values of top, right, left, bottom are specified.

In the above example, the box is placed
div.absolute { position: absolute; z-index: -1; }

NOTE: See how the other elements ignore the blue box, and behave as if it is not present.

Check out the gray box in the left. It has a class absolute-two and has position: absolute;.

The height for this element is not mentioned, and is calculated by values from top and bottom.

Notice how the gray box is placed relative to the document as there is no closest positioned ancestor.

In this example, the box is placed
div.absolute-two { position: absolute; left: 2em right: 0%; bottom: 0; }

Check out the red box within this box. It has a class absolute-three and has position: absolute;.

Notice how the red box is placed relative to the parent (section with skyblue color).

In this example, the box is placed
section.position-relative { position: relative; }
div.absolute-three { position: absolute; right: 25%; bottom: 0; }