How to move elements by using Relative positioning

Suppose we want to move paragraph two down the page a little. Like this:



The above effect is done using the CSS instruction position: relative. You then use the properties top, bottom, left, and right. You can use all four at once, or just one, two, or three of them. Here's the CSS code that moves paragraph two down the page:

P.rel {

border: 1px solid green;
position: relative;
top: 70px;

}

And here's the HTML code:

<P>Paragraph One<P>
<P>Paragraph Two<P>
<P>Paragraph Three<P>

So each paragraph has a CSS Class associated with it. The second paragraph has. The rel class uses position: relative, followed by the top property with a value of 70 pixels. What this does is to move the paragraph down 70 pixels, but relative to where it was. So it's not 70 pixels down from the top of the browser window. It's 70 pixels down from where you first positioned it: the top position of 0.

Another thing to notice here is that using position relative moves the paragraph out of its normal flow but leaves a gap where it used to be.