Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 05th of October 2015 05:58:31 AM

9.6. Summary

When it comes right down to it, positioning is a very compelling technology. It's also likely to be an exercise in frustration if you're trying to get it to behave consistently in a cross-browser environment. The problem isn't so much that it won't work in some browsers: it's that it will only sort of work in a number of them, such as Navigator 4 and Internet Explorer 4 and 5. It can be great fun to play with positioning, and one day we'll be able to use it in place of tables and frames while dramatically improving accessibility and backward compatibility. As of this writing, though, it remains a great way to create design prototypes, but a tricky thing to use on a public web site.

As it happens, this sentiment may be applied to the majority of CSS2, which is given an overview in the next chapter.

Library Navigation Links Fortunately, that's easy to do. Just pick the element that you want to use as the containing block for the absolutely positioned element, and give it a position of relative with no offsets. Thus:

P.contain {position: relative;}

Consider the example in Figure 9-19. It shows two paragraphs that contain identical text. However, the first paragraph contains an inline boldface element, and the second an absolutely positioned boldface element. In the second paragraph, the styles used

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

The image is square, but the white image background blends seamlessly with the page background. It is also possible to specify one or more colors in a GIF's palette as transparent.  Here's a link to my <A HREF=" Awesome MAD-DOG Page!">
e-mail: &nbsp;<IMG ALT="Great Page, Mad Dog!" src=mailbox.gif></a> so you can complain about this page.  The link encloses both 
the image (with default border) and the blue underlined text. Note

Another important point is that when an element is positioned, itestablishes a containing block for its descendantelements. For example, we could absolutely position an element andthen absolutely position one of its children, as shown in Figure 9-23.

Figure 9-23

Figure 9-23. Nested absolutely positioned elements

The small box B in the lower-left corner of the element A is a childof A, which is in turn a child of a relatively positionedDIV. B was absolutely positioned, as was element bolder) will inherit the value of 100 and then evaluate to the next-heaviest face, which is the Bold face and which has a numerical weight of 700. Figure 5-11 shows us the visual result of all this.

Figure 5-11

Figure 5-11. Greater weight will usually confer visual boldness

Let's take this all one step further, and add two more rules, plus some markup, to illustrate how all this works (see Figure 5-12 for the results):

examples in this section (and the next few sections) are all basedaround absolute positioning. Since absolute positioning is thesimplest scheme in which to demonstrate how top,right, bottom, andleft work, we'll stick to that for now.

Figure 9-2

Figure 9-2. Positioning an element within its containing block

Note that the positioned element has padding, a double border, and aslightly different background color. In Figure 9-2, shorthand property for the other font properties. Any of these values may be omitted except for font-size and font-family, which are always required for a valid font declaration. Note the following incorrect examples.


This is used to declare a specific font to be used, or a generic font family, or both. Note that the use of a specific font family is dependent on the user having said font installed on the system. Thus the use of generic font families is