Relative positioning is when you position a block element relative to where it would have been by default.  Save static.html as relative.html.

Compare the existing second rule set with the one here.  Replace the second rule set with it:

#second {
    position:relative;                
    top:10px;
    left:100px;                
    height:80px;
    width:400px;
    background-color:blue;
    padding:0px;
    margin:0px;
    border:0px;            
}

Save and try and the second div should now appear lower and out to the right (open static.html to compare).  Look at the code and you should see why (the first three lines).  The div is 100px further from the left of where it would have been with static positioning (and 10px down from the top).  That is it's position relative to where it would have been.

This is where it gets a little weird.  Change the rule for the first div as well by replacing it with this:

#first {
    position:relative;
    top:50px;
    left:50px;                
    height:100px;
    width:300px;
    background-color:green;
    padding:0px;
    margin:0px;
    border:0px;
}

Save and try and you can see that the first div has now moved as well.  It has moved relative to where it would have been.  Note that it's new visual position has not affected the second div.  To understand why that is true this might help:

Relatively positioned divs relative to their static position!

The div elements are actually still where they were in static.html (the dashed outlines).  However, they are displayed in their relative position.  The relative position of second is not affected by the relative position of first it still behaves as if the first div is in the static position.

Using relative positioning you could have the second div showing above the first div.  Try this by changing the top:10px; line for second to top:-100px;  Their position in the code stays the same but they appear to be in a different order.