Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 20th of April 2018 04:40:55 PM

9.4. Fixed Positioning

H1s, lists, and list elements -- behave in interesting ways, sometimes predictable, sometimes surprising. There are differences in the handling of element placement along the horizontal and vertical axes, for example. In order to fully understand how block-level elements are handled, you must clearly understand a number of boundaries and areas. They are shown in detail in Figure 8-2.

Figure 8-2

Figure 8-2. The complete box model

In general, the width of an element is defined to

As implied in the previous section, fixed positioning is just like absolute positioning, except the containing block of a fixed element is always the viewport. In this case, the element is totally removed from the document's flow and does not have a position relative to any part of the document.

This can be exploited in a number of interesting ways. First off, it's possible to create frame-style interfaces using fixed positioning. Consider Figure 9-24, which shows a very common layout scheme.

Figure 9-24

Figure 9-24. Emulating frames with fixed positioning

This could be done using the following styles:

DIV#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;
background: gray;}
DIV#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;
background: silver;}

This will fix the header and sidebar to the top and side of the viewport, where they will remain regardless of how the document is scrolled. The drawback here, though, is that the rest of the document will be overlapped by the fixed elements. Therefore, the rest of the content should probably be contained in its own DIV and employ the following:

DIV#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
overflow: scroll; background: white;}

It would even be possible to create small gaps between the three positioned DIVs by adding some appropriate margins, demonstrated in Figure 9-25:

BODY {background: black; color: silver;}  /* colors for safety's sake */
DIV#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;
background: gray; margin-bottom: 2px; color: yellow;}
DIV#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;
background: silver; margin-right: 2px; color: maroon;}
DIV#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
overflow: scroll; background: white; color: black;}
Figure 9-25

Figure 9-25. Separating the "frames"

Given such a case, a tiled image could be applied to the BODY background. This image would show through the gaps created by the margins, which could certainly be widened if the author saw fit. For that matter, if a background image was of little importance, simple borders could be applied to the DIVs instead of margins.



Library Navigation Links

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

with the result depicted in Figure 9-4:

top: 0; bottom: 0; left: 0; right: 50%;
Figure 9-4

Figure 9-4. Filling the left half of the containing block

Since the default value of both width and height is auto, the result shown in Figure 9-4 is exactly the same as if you had used these styles:

top: 0; bottom: 0; left: 0; right: 50%; width: auto; height: auto;

8.2.1. Vertical Formatting

Vertical formatting is much easierto cover, so let's do that first. A good deal of this wascovered in the previous chapter, so we'll revisit the highpoints and delve into some trivia before moving on to the much morecomplex subject of horizontal formatting.

8.2.1.1. Height

the text before the paragraph doesn't affect theparagraph's status as the first child. However, in the secondDIV, the H2 is the first child,so it does not match the rule P:first-child. Ifthe intent is to have the first child of any element be italicized,no matter what element that might be, then you need only leave offthe element part of the selector, or use it in conjunction with theuniversal selector. This will yield the result shown in
Figure 10-12:

Now let's say we want to apply styles to elements that are part

WARNING

Opera 3.5 allows negative paddingvalues, but this was fixed in Opera 3.6.The other browsers don't allownegative padding lengths.