Monday 20th of April 2015 02:45:12 AM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: Z

z-axis: 9.5. Stacking Positioned Elements
z-index property: 9.5. Stacking Positioned Elements


Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z


Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

positioned and given a top ofstatic-position, then the top of the positionedelement will be 3 ems from the top of the containing block. Later inthe chapter, we'll see how this can be useful.

The other value, auto, allows for some even moreinteresting effects. It acts much the same as settingauto on margins, but in positioning, this canpermit the creation of elements that are only as wide or tall as theyneed to be in order to display their content, without having to of floated elements seems to support this interpretation. On theother hand, the CSS2 property z-index makes thisreasoning more complicated. As of this writing, implementations havenot yet advanced sufficiently to test this out, and the CSS2description of z-index doesn't really shedany light on this subject.

Ultimately, if you use negative margins, you may not get the sameresults from all browsers. Since no one can clearly say which isright, none of them can really be considered to be buggy -- at

Under CSS2, the same effect can be achieved without the use of aclass on the first paragraph. This is done by using new CSS2selectors, such as the adjacent-sibling selector:

 H1 + P {text-indent: 0;}

In a CSS2-aware user agent, this will set atext-indent of 0 for anyparagraph which immediately follows any H1element. However, since the paragraph here is the child of aDIV, it doesn't immediately follow the

Figure 9-1

Figure 9-1. An example of a containing block

Not every element in CSS generates a containing block for its descendant elements. The rules for the establishment of a containing block are as follows:

  1. The containing block of the "root element" (also called the initial containing block) is established by the user agent. In HTML, the root element is the HTML element, they aren't ignored, then they're likely to cause strangeresults. Therefore, it might be a good idea to omit the universalselector in conjunction with class and ID selectors.

    BODY > P {color: green;}<BODY><P>This paragraph is green.</P><DIV><P>This paragraph is not green.</P>