Chapter ONLINE SECTION V. 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 elements—something 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.