Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

How It WorksChapter 11: PositioningIn Example 11-5, you saw three fundamental concepts to the z-index property. In the first example, yousaw how when there is no explicit z-index defined, it is defined automatically, and each subsequentelement is positioned higher than the last one.Then, in the second example, you gave each of the elements an explicit z-index; starting with the element with the id name five through the element with id name eight. The element with idname five is positioned highest in this stack, since it has a z-index of 4, then each subsequent elementis stacked lower, all the way to the element with id name eight, which has a z-index of 1.In the third example, you see how the z-index is ignored when it is placed on descendant elements, sincedescendant elements must always have a higher z-index than that of their parents and ancestors.In the next section I demonstrate how to apply positioning to some real-world examples, such as verticallyaligning content and multicolumn layouts.Other Ways to Apply PositioningPositioning is a powerful tool that enables you to create applications in web-based layouts from the simpleto the very complex. In the following sections I examine a couple of practical applications of positioningin website design, starting with vertically and horizontally aligning content.Horizontally and Vertically Aligning Positioned ContentThe following technique is used to horizontally and vertically center content in a web browser, although,it could be easily adapted for other alignment scenarios. The technique is demonstrated in Figure 11-29.In the main style sheet in Figure 11-29a, you see two fundamental concepts coming together. The element with id name dialogue is positioned absolutely, and then offset from the top and the left by 50percent. This is one of the few places where percentage measurement is actually useful. Then the topand left margins of the with id name dialogue are adjusted in the negative by exactly half of theelement’s collective width and collective height. So the top margin is set to a negative number that isexactly half of the sum of the top and bottom border-width, padding, and height values. In this casethat number is 112, so half of 112 is 56. Then the left margin is adjusted in the negative by exactly half ofthe element’s collective width, or the left and right border-width, padding, and width values, whichcomes to the sum of 212, half of which is 106.The style sheet in Figure 11-29a is included in the markup in Figure 11-29b.Once the source code in Figure 11-29a and Figure 11-29b is rendered in a browser, you get output likethat in Figure 11-29c.441