Positioning

Setting The Position Of An Object
With the position property, you can set the value to static, relative, absolute, and fixed. Static is the default, so we will discuss relative, absolute, and fixed.

relative: Setting the position to relative means that the object will display where it is placed, almost like the default behavior.
Absolute: Setting the position on an object to absolute will make it a completely separate element. It would be like placing one layer of text on top of the other.
Fixed: Setting the property to fixed means that the element will not scroll with the rest of the content, it will remain in place. However, this is not supported by windows, and although it is supported on IE 5 for Mac, it has a bug, and may not work properly.

Once you have decided you position type, you can decide how far from the left, and how far from the right the object will move. You do this with the top and left properties.

Let's say that you wanted an image to cover up an entire body of text, as if on a separate top layer, and you wanted it to be 20px from the top, and 30px from the left. You would make your CSS for that image something like this:

img {
position: absolute;
top: 20px;
left: 30px;
}

Here is another example. Let's say I wanted to make this. This is the CSS document that I would make:

.overtop {
position: absolute;
top: 100px;
left: 60px;
background-color: #FFFFFF;
border: #990000 solid 1px;
}

Now, whatever I set the "overtop" class to will have those specs, and almost be as if it were on another layer.

You can also set the position from the right and bottom instead.

Working With Z-Index
With the z index system, you can set the stacking order of your different "layers". The z-index will have a number as it's value. The object with the highest number is placed on the top, the lowest is placed on the bottom.

Here is an example. The CSS document looks like this:

.overtop2 {
position: absolute;
top: 50px;
left: 90px;
border: solid 2px;
z-index: 2;
width: 150px;
}
.overtop1 {
position: absolute;
top: 150px;
left: 60px;
z-index: 1;
}
.overtop0 {
position: absolute;
top: 100px;
left: 30px;
z-index: 0;
}
span {
background-color: #FFFFFF;
border: #990000 solid 1px;
}

Main?