How to Relatively Position an Element without It Taking Space in the Document Flow

Solution with the CSS position property

If you want to relatively position an element and don’t want it to take up space in the document flow, you can try the following.

You need to make a pseudo-relative element by creating a <div> element having a position set to "relative", with the width and height set to 0 having a purpose of creating a reference point for position.

We set the position of the child <div> element to "absolute", and specify both the left and top properties as "100px".

Example of relatively positioning an element without it taking space in the document flow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        position: relative;
        width: 0;
        height: 0;
      }      
      .example {
        position: absolute;
        left: 100px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="example">
        This is a 100px offset from where it should be, from the top and left.
      </div>
    </div>
  </body>
</html>

Result

This is a 50px offset from where it should be, from the top and left.