Relative Positioning is made up of three parts. First, the "position" - this is simply set by "position: relative;"
By setting something's position to "relative", you've told it you want to position it "relative" to where it would normally flow in the document.
To tell it WHERE you want to position it, use "top" or "bottom", and "left" or "right".
In this example we've made a page with an image, then a paragraph of text.
The image has been set to "position: relative;" (which doesn't move it at all), "top: 30px;", and "left: 60px;"
This seems kind of backwards, because we didn't move it up OR left - but what you're telling it to do with "top", is - move this item X pixels FROM the top
of where it would normally flow in the document. The same with "left" - we're telling it to move X pixels FROM the left of where it would normally flow.
You'll also notice that it overlaps the text - with position:relative, the elements "box" stays where it was, and keeps anything else from taking up the space, and
moves the element where we tell it to go. Picture it as if we had a piece of paper - we set a photo in the top left, wrote some text next to it, and drew an outline
around the photo. We could MOVE the photo (over the text), but it's outline would still be on the page, keeping the text from being able to move up in it's spot.
[BACK to RESOURCES]