November 19, 2001 > Tag of the Week
Absolutely Fixed Position—Relatively Speaking
Positioning control, and the lack thereof, has long been a sore spot for many HTML authors. In its purest sense, HTML should never need positioning information, since it conveys semantic context to the browser, who then determines the appropriate layout. In actual usage, where HTML is a vehicle for all sorts of crass advertising and focused content, positioning control is critical to effective document creation. While HTML itself is lacking in this department, CSS2 once again comes to the rescue.
Positioning Models
Within CSS2, each element can adopt one of four positioning models. The default
model, static, mirrors the traditional HTML positioning model, with
elements placed within a continuous flow that represents the HTML page.
The relative model places an element at some position relative
to where it would have been placed using the static model. Only
the current element is affected by relative placement; subsequent elements return
to their normal position in the flow.
The absolute model fixes an element at an absolute position within
the document. The element is not part of the flow and does not affect the positioning
of items before or after it. Essentially, the element is lifted from the flow
and placed at a specific position in the document.
The fixed model is similar to the absolute model,
except that the element is positioned within the browser window instead of the
document page. This means that as the document scrolls within the browser window,
fixed elements will not move.
You control the positioning model used by an element with the position
property. By supplying one of the four previously mentioned keywords, you determine
how the element will be positioned in the document. This property is inherited
so that elements contained within a positioned element are placed in a similar
fashion.
Managing an Element's Position
Once you've determined the positioning model for an element, you can use the left,
right, top, and bottom properties to place
the element as needed. The top and left properties are
interpreted differently, depending on the positioning model used. For all the
models, the right and bottom properties specify where
the respective edges of the element should be, relative to the top and left edges.
Thus, you can use right and bottom to control the size
of an element.
For static positioning, the top and left
properties are ignored. This makes sense since the browser gets to decide where
static elements are placed in the flow.
The relative model interprets the top and left
values as offsets to the position the element would have taken using static
positioning. Negative values shift the element up and to the left, positive
values move it down and to the right. You can alter the position of relative
elements by dynamically changing the top and left property values, creating
crude animation effects. Be aware that relative elements may overlap or obscure
other elements.
The absolute model uses the top and left
properties to determine the position, within the document page, for the element.
Depending on how the document is scrolled by the user, the element may not be
visible in the browser window.
The fixed model behaves like the absolute model, except that
the top and left properties specify a position within
the browser window, with a position of (0,0) being the upper left corner of
the window. Negative values may move the element out of the window, as will
large values that exceed the size of the browser window. Since the fixed element
does not move as the document scrolls, it is almost guaranteed to obscure some
portion of the underlying document as the user scrolls.
While previous versions of HTML attempted to provide some positioning control, CSS2 finally codifies all the flavors of position management in a simple way. You should finally be able to position elements in your documents easily and correctly using these new features of CSS2.
Chuck is the author of the best-selling HTML: The Definitive Guide and now, the fourth and expanded edition, HTML & XHTML: The Definitive Guide. He also writes on a variety of Internet and web-related topics for a number of online magazines.
