home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeWeb Design in a NutshellSearch this book

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

17.6.1. The position Property

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

It works in conjunction with the top and left properties (used for specifying distances from the top and left starting point), the bottom and right properties, and the width and height properties (for specifying the width and height of the element, including its padding and border). Values for these properties can be specified as either length units or percentages. Absolute positioning

Absolute positioning places the element in an arbitrary position, but technically it is still relative to the containing block of another element or to the document coordinates (it will scroll when the document scrolls). Measurements in absolute positioning are relative to the sides of the document itself (or the containing block of the "positioned" block the element is inside). Again, negative values can be specified.

When an element is positioned absolutely, the space it previously occupied is closed up, as shown in Figure 17-5 and the following code. In its new position, the element may overlap other elements on the page. An absolutely positioned element has a margin of zero by default -- changing the width of the element's margin results in a corresponding shift in the element's position.

<STYLE TYPE="text/css">
EM {position: absolute; top: 20px; left: 12px;}

<P>This line contains some <EM>emphasized</EM> text that will be repositioned.</P>
<P>This is some more text that follows the line with emphasized text.</P>
Figure 17-5

Figure 17-5. Word moved down and to the right with absolute positioning

If its parent element (or an element somewhere above the parent) is specified to have relative positioning (whether or not it is actually moved), the absolutely positioned child element will be placed relative to the position of the top-left corner of this "relatively positioned" parent. One possible application of this is keeping notations near their source paragraphs.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.