Chapter 9. Relative and Absolute Positioning

The normal way a document is laid out is that the boxes for all elements are put one after the other or below the other (depending on whether they are inline or block), with their distances and alignments specified by properties such as margin, padding, and width. An occasional box is shifted to one side with the float property. In this way, the boxes fill the canvas, or the pages, starting from the top and continuing until all boxes are placed.

Relative positioning adds to this the ability to make corrections to the positions of individual boxes without affecting other boxes. For example, a box may be moved up or down to overlap another box. It is seldom needed in a style sheet. The place where the properties for relative positioning usually appear is in scripts. For example, a dynamic effect that cannot be achieved with CSS2 (although maybe with a future level of CSS) is to move text into place on opening a document: The text moves in from the side and the headers fall into place from the top, slowly reducing their relative offsets to zero. Scripts aren't very good at creating smooth motion effects, but so far, there is no other solution that works with HTML.

Absolute positioning is completely different. It takes an element out of the normal sequence (like display: none would do), but then it puts it somewhere else, without regard for what else might be there. Absolute positioning is good at creating displays with little pieces of text or images that are put seemingly independent of each other in fixed spots on the canvas. For an example, see Figure 9.1.

Figure 9.1. An example of absolute positioning: on the left in a non-CSS browser, on the right in a CSS2-capable browser. See the end of this chapter for the document source code. The example is an approximation in CSS of the cover of the 1996 edition (Academic Press, Leiden) of the essay, which first appeared in 1930.

A variation of absolute positioning also allows elements to be put at fixed positions not on the canvas, but in the viewport: If you view a page with such fixed elements on a browser, the elements appear to be glued to the glass of the monitor. While other elements scroll when you move the scroll bars, these fixed elements stay put. If you print such documents, you see that the fixed elements are glued to the page box: They appear in the same spot on every page that you print.