Understanding Positioning

In the last part of the preceding example, you used the position attribute to place a div in the lower-left corner of another div. This is a nice segue into the confusing and often misunderstood issue of positioning in CSS.

If you open the Modify Style dialog for any of the current styles, classes, or IDs, you see that the position attribute (found under the Position category) has five options: absolute, fixed, relative, static, and inherit (see Figure 14.8). The physical position of any object in a page depends on what this attribute is set to in the current style and whatever style that wraps it.

Figure 14.8 You can set the position attribute found under the Position category in the New and Modify Style dialog to absolute, fixed, relative, static, or inherit.