First off, it's important to remember that CSS positioning is a part of CSS, not something separate from it. Many people do refer to positioning as a separate concept, calling it CSS-P or other terms, 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 tutorial 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 tutorial. 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.