Getting Started
Absolute and Relative Positioning
Within CSS you can position where exactly items will appear in the browser. This is done by either one of two ways. An absolute position, whereas you are defining exactly where within the browser that the item should appear. A relative position, where an item is placed within the browser based on its relationship to another item already in the browser output.
Absolute Positioning
If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. Say I wanted a graphic to appear 46 pixels from the top of the page and 80 pixels in from the right, I could do it. The CSS code you'll need to add into the image is
img {position: absolute; top: 46px; right: 80px; }
You just add in which method of positioning you're using at the start, and then push the image out from the sides it's going to be closest to. You can add the CSS directly into the tag using the style attribute (as shown in the introduction to stylesheets), or you can use classes and ids and put them into your stylesheet. It works the same way. The recommended method is to add classes for layout elements that will appear on every page, but put the code inline for once-off things.
Relative Positioning
When you position something relatively, you are modifying its position from where it would have been if you hadn't changed anything. I find that to be the easiest way of thinking about it. For instance, in the next sentence, I'll offset some words 12px down and 22px right relative to their start position.
Well, here are some words (some words)
The words in brackets are the words in their original positions, and the bold ones are the moved words. The CSS code to move them was
<span style="position: relative; top: 12px; left: 22px;">some words</span>
There are two types of positioning: absolute and relative.
You should notice that if you want to move something left, you use the right code, and push it away from that side and vice-versa.
To override an inherited position property, and make the element just a normal part of the page again, set it to position: static.
Homework