HTML and CSS [Electronic resources] نسخه متنی

Getting into Position

By now, you know I'm just a wee bit interested in details. I feel it's very important that you learn the why as well as the how of things. So before I show you how to position elements, I want to go over 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.

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 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.