CSS Positioning – Position Absolute and Relative

To make complex layouts, sometimes you have to position elements outside of the document flow and for this CSS position property can be used

CSS position property supports 5 values:-

• static(default)

• relative

• absolute

• fixed

• sticky

Static Positioning

This is the default value of the position property. In this, the element is positioned according to the normal flow of the element.

And in this values like a top, right, bottom, left and z-index does not affect the element.

This behavior can be seen in the below codepen

Before jumping to relative positioning let's first understand what positioned elements

Positioned Elements:- positioned elements are those elements whose position value is anything except static i.e relative, absolute, sticky, fixed

Relative Positioning

In Relative positioning, the element is positioned according to the normal flow of the element. In this, the element is placed relative to its original position within the parent element. And the space given to the element is the same as when it would have been given when the element was static.

The difference here is that you can use offset values like top, right, bottom, and left here which push the element from its position according to the value.

Here you can see the normal space where the element was located is empty and has not been removed. just the difference from static is that now we can use top, right, bottom, and left values

Absolute Positioning

In the absolute position, the element is removed from the normal flow of the elements and also no space is created for the absolutely positioned element.

The absolute position element tries to find its nearest positioned (having a position value other than static) ancestor and place relative to it if there is no positioned ancestor then it is positioned relative to the window. And the final position is determined by using top, right, bottom, and left values

As you can see the space for the element is not present in normal flow and also the top and left are relative to its parent element because it is a positioned element having the property of relative and it is very common practice to use position relative to the parent element and absolute on child element to position the child element

Some important points to remember in the case of absolute elements:-

• Absolute only take as much space as needed for the content to display and the max-width can only be the width of its positioned ancestor

• You can also omit height by specifying both top and bottom positions,you can see a live example in the last example, this works similarly in the width case here we use the left and right property

• If both top and bottom are given and technically height is not auto so the top wins,

• Similarly in left and right the left wins if the text is ltr(English, horizontal Japanese, etc.)and the right wins if the text is rtr((Persian, Arabic, Hebrew, etc.)