Difference Between CSS position “relative” and “absolute”

In CSS, the “position” property is utilized to set the element’s position where the HTML elements should be displayed on the web page. This property is bound with the left, right, top, and bottom properties to set the final location of the HTML element.

This blog will discuss:

• What are CSS “position” types?
• How to Use CSS “position: relative” Property?
• How to Use CSS “position: absolute” Property?

What are CSS “position” Types?

There are five types of CSS positions:

• “static”: The statically positioned elements are not affected by offset properties bottom, left, right, and top. It is the default value of an HTML element.
• “fixed”: The fixed positioned element remains in the same place where it is set even on the screen scroll.
• “sticky”: A sticky positioned element will remain static when the user scrolls the screen.
• “absolute”: An absolute element is positioned or placed relative to the nearest or closest positioned ancestor HTML element.
• “relative”: The relative element is placed relative to its normal position.

Now, before discussing the difference between the relative and absolute positioned element, we will create a web page for the demonstration.

Prerequisite

In HTML, first, add a div element with the class attribute name “div-parent”. Inside this, include four more <div> tags with the class name “div-1”. Note that only the second <div> will have two classes, “div-1” and “positioning”.

HTML

Let’s apply CSS styling to the <div> elements mentioned in the above HTML code block.

Style “div-parent” div

The div element with class name “div-parent” is styled with the CSS properties that are explained below:

• “margin-top” property is utilized to set the space at the top of the div element.
• “position” property is set as “relative”, which positions or places the selected element relative to its normal position.

Style “div-1” div

Here is the explanation of the applied properties:

• “background-color” property sets the background color of the div element.
• “width” property defines the width of the added HTML element.
• “height” property’s value represents the height of the HTML element.
• “border” property applies the border around an element. It is specified by using the values for the width, style, and color.
• “display” with the value “inline-block” property permits the application of the width and height to the element.

How to Use “position: relative” in CSS?

When you set the “position” property’s value as “relative”, it moves relative to its normal position. Its position also depends on the values as the side properties. However, other elements will not be resized to fill the gap left behind by the element.

Style “positioning” div

Here:

• “position” property value is set as “relative”, which positions the element relative to its normal position. It is then paired with the top, right, left, and bottom properties to set the final location.
• “top” property with the value “20px” sets a space of 20px above an element.
• “left” property with the value “20px” provides a space of 20px at the left side of an element.

The result below clearly shows the position of the second box is moved from the top and the left:

How to Use “position: absolute” in CSS?

The “position” property with the value “absolute” changes the element’s position relative to its positioned parent div. If the position of the parent element is not set relative, then the div will move relative to the web page’s body. Moreover, other elements will fill the space left by the element.

Let’s change the “position” property of the div with the class named “positioning” from relative to absolute and see the difference:

The second box is set to 20px space from the top and 20px space from the left relative to its parent element:

That was all about the relative and absolute position in CSS.

Conclusion

In CSS, to define the final location of the element, the position property is utilized. More specifically, the “relative” position places the element’s position relative to its normal position, while the “absolute” position places the element relative to its positioned parent HTML element. This blog discussed the difference between relative and absolute CSS positions.