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...