Introduction and Overview
Position: Static, Relative, Absolute, and Float
Tips on Positioning
Bugs?
Further Reading & Conclusion

Layout designers can easily be confused by positioning with Cascading Style Sheets (aka, "CSS"). And it's no wonder -- there isn't a lot information available on the subject.

I am not an expert, but I hope that this tutorial will help alleviate the confusion.

FYI: This is not an article written to convince you of the benefits of CSS layout or educate you on the alternatives. This is written for people with some grounding in CSS (i.e: you know what a selector is) who want to understand positioning better.

This is not an exhaustive tutorial with lots of examples. If there's a real demand for it, I may be convinced to hand out a bunch of examples. But be sure and check out the links I've provided; they will direct you to more tutorials and lots of examples.

There are a few different kinds of positioning available to us: there are what is known as "positioning schemes" and there are "floats". Because of browser differences in CSS support, there are positioning methods not commonly supported; we will be looking at the most supported ones.

Positioning Properties & Values

Position:Static (Normal Flow)
Position:Relative
Position:Absolute
Floats

Mary
Mary is an active member of the Christian-Web-Masters.Com forums. You can find her there to bug her about anything. Alternately, you can visit her website, and check out some other tutorials and free goodies.