Lets play with positions

I'm in the background so you can focus on how the strawberry img in behaving.

All these grayed elements are here to create spaces and "positions", it would be difficult to note the difference with just one element on the page

This pink border defines the div you're playing with. This paragraph original position was right above the strawberry photo

I'm also inside of the div,but my original position was right under the strawberry photo

3

If none of the img parents is positioned (position property to anything other than static) the img would use the offset value ( top:220px) relative to the body.

Click on me to set position: relative at the div that contains the image.

220px

4

The top:220px is still in action, but now it's related to the container and it will not be resolved using the default position but the uppermost position of the container.

220px

Look how the content that were under the picture goes up and fill the space that belonged to it.

1

As you can see, this is the starting point of the strawberry image, that's the default position, without any manipulation. It's distance from the top is the sum of all elements that precedes it.

561px