Now here we have an example of a relatively positioned picture who's position can change with the resizing of its parent element.
Which in this case is the browser window it's self.

Resize this page and see how the picture on the top moves. Because it's relatively position down from the top 100 pixels and from the left -100 pixels it can appear anywhere from overlapping the other picture to partially moving off the page.

Why is this happening? Normally it would appear to the right or on the next line down,below the picture of Sam marking his banana plants. But because it's moved to the left and not from it (negatively position), when it would normally be position below Sam and the bananas, it moves off the page 100 pixels. You may also notice when it moves off the page there is a gap between it and the content above it. This is because it is also positioned 100 pixels down from the top.

I know this is probably something you would not want to happen but it is a good example of relative positioning. Don't worry, if you work much with positioning, you'll use it.

Would you like to see this same page but with the picture absolutely positioned? Click here to see the difference.