Positioning with Style Sheets

In August of 1997, the W3C published its working draft of specifications for style sheet properties for positioning HTML elements on the page and in three-dimensional space. This greater control over object placement can be used for more tightly designed static page layout as well as for creating and tracking motion effects with DHTML.

This effort was initiated by Netscape and Microsoft, who began supporting some positioning properties in their Version 4.0 browsers. The positioning concepts and properties were picked up and developed further in the CSS Level 2 specification, which was released in May of 1998.

Style sheet positioning is a rich and complex topic that is beyond the scope of this chapter, but this section aims to introduce some basic positioning concepts. For complete positioning information, see the W3C’s CSS2 specification online at http://www.w3.org/TR/REC-CSS2.

While the positioning properties are reviewed here, they come with a word of warning. Positioning is one of the most inconsistently implemented and buggy aspects of style sheets. It will be a while before a single solution works across all platforms and browsers in a predictable fashion. This is particularly unfortunate because positioning is a tempting feature and essential to some DHTML effects. If you use positioning in your pages, be sure to test thoroughly.

The position Property

The position property has three possible values: absolute, relative, and static.

It works ...

Get Web Design in a Nutshell, 2nd Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.