HTML, XHTML & CSS

52
Part III: Taking Precise Control Over Web Pages and Styles
browser window. Thus, instead of letting it be drawn automatically to the
right of the navigation bar, you can place an image down and to the left, as
in Figure 10-3. But absolutely positioned items always percolate to the top
layer when items overlap, which is why Pixel’s picture shows up on top. We
change this default order later in the chapter.
#theCat {position: absolute; top: 120px; left: 107px;}
Figure 10-3: The image is more striking in this
location.
You might be wondering why the navbar rule (defined in the listing in the
earlier section, “Visual layouts”) and the theCat rule (in the code snippet
immediately preceding Figure 10-3) both start with a pound symbol
(also known as a hash mark or octothorpe). That’s because the pound
symbol applies to an id attribute. You use a period to start a class rule,
and it will apply to every instance of that class wherever it appears on a
page. Thus, although you can apply either a class or an id to specific
elements, the difference between these two is that a class can be used
repeatedly. Comparatively, an id can appear only once on a page. You
can’t have anything else on the page that uses theCat as its id. The difference,
quite simply, is that a class lets you refer to every instance of some
(X)HTML element with a single reference, but an id can address only a
single instance for an element.
Overlapping
Two objects can be assigned to the same position in a Web page. Although
this may sound like a problem, overlap can produce interesting design