JavaScript: The Definitive Guide, Fourth Edition

Element Positioning with CSS

For DHTML content developers, the most important feature of CSS is the ability to use ordinary CSS style attributes to specify the visibility, size, and precise position of individual elements of a document. In order to do DHTML programming, it is important to understand how these style attributes work. They are summarized in Table 18-2 and documented in more detail in the sections that follow.

Table 18-2. CSS positioning and visibility attributes

Attribute(s)	Description
position	Specifies the type of positioning applied to an element
top, left	Specifies the position of the top and left edges of an element
bottom, right	Specifies the position of the bottom and right edges of an element
width, height	Specifies the size of an element
z-index	Specifies the “stacking order” of an element relative to any overlapping elements; defines a third dimension of element positioning
display	Specifies how and whether an element is displayed
visibility	Specifies whether an element is visible
clip	Defines a “clipping region” for an element; only portions of the element within this region are displayed
overflow	Specifies what to do if an element is bigger than the space allotted for it

The Key to DHTML: The position Attribute

The CSS position attribute specifies the type of positioning applied to an element. The four possible values for this attribute are:

static

This is the default value and specifies that the element is ...