Getting into Position

some terminology and concepts important when working with positioning. Surely you're itching to start positioning elements and working with layouts, but bear with me. I assure you, there is method to my madness.

but it's not a separate part of CSS.

In fact, positioning is really at the heart of CSSit's the piece that gives you ultimate control over the visual results of a page. The separation is a false one, which grew mainly out of the fact that positioning wasn't well supported and, thus, was mostly unusable until the past few years.

We're past that now, fortunately, and can begin to look at positioning in earnest. Are there flaws still within browsers? You bet there are, and I'll be discussing some of them in this chapter and the next one.

To best prepare you to quickly grasp what some have spent years trying to clarify, I'll be using some terms to describe these positions and what they mean. The biggest part of the hurdle for many people who want to use CSS as a means of laying out pages is that the terminology is sometimes confusing, misleading, or downright unclear.

The CSS positioning scheme allows for four types of positioning, as follows:

• Absolute

• Relative

• Static

• Fixed

Positioning can make use of the offsets top, bottom, left, and right to position the box with specific values.

You'll learn the details of how each of these works as you go through the chapter. But first, here's a bit about normal flow, containing blocks, and the browser viewport. It's a little dry, I suppose, but it's necessary to discuss nonetheless.