Understand the Difference between Position Absolute and Relative in CSS

CSS provides developers with powerful tools to manipulate the position of HTML elements. Among these tools are the position:absolute and position:relative properties. In this article, we will explore the difference between these two properties and how they affect the positioning of HTML elements.

We will use these codes as an example:

<div id="body">
  <div class="box-before">
    box-before
  </div>
  <div class="box-outside">
    box-outside
    <div class="box-inside">
      box-inside
    </div>
  </div>
  <div class="box-after">
    box-after
  </div>
</div>

#body {
  position: relative;
  width: 400px;
  height: 300px;
  text-align: center;
  background-color: khaki;
  font-family: Microsoft JhengHei;
  font-weight: bold;
  margin: 0 auto;
}

.box-before {
  width: 300px;
  height: 50px;
  color: white;
  font-size: 20px;
  background-color: #0B2429;
}

.box-outside {
  width: 300px;
  padding: 10px;
  color: white;
  font-size: 20px;
  background-color: #F3AC3C;
  box-sizing: border-box;
}

.box-inside {
  height: 50px;
  color: white;
  font-size: 20px;
  background-color: #1A4341;
}

.box-after {
  width: 300px;
  height: 50px;
  color: white;
  font-size: 20px;
  background-color: #0B2429;
}

When you run this code, it will show this.

What is Position Relative in CSS?

When the position:relative property is applied to an element, it is positioned relative to its normal position within the document flow. The element is still considered to be in the document flow, which means that it affects the layout of other elements on the page.

Position:relative, on the other hand, keeps the element in the document flow, but allows it to be moved from its normal position. This means that other elements on the page will be affected by its new position.

Let’s check the example:

.box-outside {
  position: relative;
  top: 50px;
  left: 50px;
}

This code will move the “.box-outside” 50 pixels down and 50 pixels to the right from its normal position, while still keeping it in the document flow. As you can see, “.box-before” and “.box-after” didn’t move after we add the code.

What is Position Absolute in CSS?

When the position:absolute property is applied to an element, it is taken out of the normal document flow and positioned relative to its closest positioned ancestor. If there is no positioned ancestor, the element is positioned relative to the initial containing block, which is usually the body element.

Position:absolute takes an element out of the document flow and positions it based on the closest positioned ancestor. This means that the element will be positioned in a different place than it would be if it were still in the document flow.

Here’s an example:

.box-outside {
  position: absolute;
  top: 50px;
  left: 50px;
}

We change the position property to absolute and it will be a little bit different. The “.box-after” take the space moving top. It’s because positions it based on the closest positioned ancestor but we don’t have any. It turns out based on the body.

How does position absolute find its parent?

If the element’s parent or ancestor elements have their position property set to “relative”, “absolute”, or “fixed”, then the element is positioned relative to the nearest of these ancestor elements.

If no ancestor element with a position property is found, the element is positioned relative to the initial containing block of the page, which is usually the top-left corner of the page.

Here are examples:

No position property has been set in ancestor elements.

.box-inside {
  position: absolute;
  top: 0;
  left: 0;
}

It is positioned relative to the initial containing block of the page, which is usually the top-left corner of the page.

What if we add position: relative to “box-outside”?

.box-outside {
  position: relative;
}

It is positioned relative to the “box-outside”.

Try it yourself:

See the Pen position static demo by Peter Lin (@peter-lin-the-bold) on CodePen.

Conclusion

In conclusion, understanding the difference between position:absolute and position:relative is crucial to properly positioning HTML elements on a web page. Remember that position:absolute takes an element out of the normal document flow, while position:relative keeps the element in the document flow. With this knowledge, you can manipulate the positioning of your HTML elements to achieve the desired layout for your web page.