Adding Dynamic Positioning to Documents

Now a part of Cascading Style Sheets Level 2, element positioning standards began life as a CSS1 supplement, called CSS-Positioning (or CSS-P for short). CSS properties that govern positioning are a well-defined subset of CSS, but when the W3C DOM CSS Working Group divided CSS Level 3 into modules, the properties got spread across multiple modules. For the sake of simplicity, however, this chapter refers to this group of properties as CSS-P.

A fundamental concept of positioning is direct control of the placement of elements on the page, when the browser-controlled flow of content can't meet your design requirements. To accomplish element positioning, a browser must be able to treat positionable elements as layers that can be dropped anywhere on the page, even overlapping other fixed or positionable elementssomething that normal HTML rendering scrupulously avoids.^[*]

^[*] I use the term "layer" guardedly here. While the word appeared originally in the Netscape Navigator 4 DHTML lexicon (derived from the browser's <layer> tag and a scriptable layer object), you probably won't see the same word coming from Microsoft, and only rarely in W3C recommendations. My application of the term is generic because it aptly describes what's going on here: a positionable element is like an acetate layer of a film cartoon cel. Before the days of all-digital animation, the cartoon artist started with a base layer for the scene's backdrop and then positioned one or more acetate layers atop the background; each layer was transparent except for some or all of the art for a single frame of the film. For the next frame of the cartoon, perhaps one of the layers for a character in the foreground must move a fraction of an inch. The artist repositions that layer, while the others stay the same. That's what I mean by a "layer" in this context.

The notion of layering adds a third dimension to a page, even if a video monitor (or a printed page) is undoubtedly a two-dimensional realm. That third dimensionthe layering of elementsis of concern to you as the author of positionable content, but is probably of no concern to the page's human viewer.

While the primary focus of the CSS-P recommendation is the way an author lays out elements in a document, the IE 4 and W3C DOMs expose CSS positioning properties as scriptable properties that can be changed in response to user action. You have the opportunity to create some very interactive content: content that flies around the page, hides and shows itself at will, centers itself horizontally and vertically in the currently sized browser window, and even lets itself be dragged around the page by the user.

Netscape Navigator 4 was the first released browser to incorporate positioned elements. Because its HTML, CSS, and DOM approaches to positioning did not gain favor in the W3C, the techniques were not carried forward in newer browsers. These techniquesas well as their coexistence with the incompatible IE 4 modelwere documented at length in the first edition of this book. Here, however, we'll detail only the far more compatible and prevalent IE and W3C implementations.