Edit

Relative Positioning

In the relative positioning scheme the element's box position is calculated according to the normal flow. Then the box is shifted from this normal position according to the properties — top or bottom and/or left or right.

Example of Code

<style type="text/css"> 
 .example-relative-position {
    position: relative;
    left: 50px;
    background-color: gold;
    width: 90px;
  }
</style>
<body>
    <p>Here is the normal flow of content...</p>
    <div class="example-relative-position">
      This div has relative positioning.
    </div>
    <p>...and here is more content...</p>
</body>
</html>

Output

   

Here is the normal flow of content...

   
      This div has relative positioning.   
   

...and here is more content...