Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 29th of May 2015 01:49:38 AM

9.4. Fixed Positioning

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;}


Also paragraph breaks.  <P>But making extra space
by stringing P tags together doesn't work <P><P><P><P>. Use
multiple BR tags, or insert special non-breaking space characters between
P tags instead:

<P>&nbsp;<P>&nbsp;<P>

  Also paragraph breaks. 

But making extra space with multiple P tags doesn't work  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.

universal selector. This will yield the result shown in Figure 10-12:

Now let's say we want to apply styles to elements that are partof a first child; for example, all emphasized text within afirst-child paragraph should be italicized:

Of course, this will match any first-child paragraph, no matter itsparent element. Suppose instead we want a rule that applies only toparagraphs that are the first children of DIVelements. In that case, we need to use the child selector:of these in-line font manipulations, but these tags work fine. 
 <BR><FONT COLOR="#CCCCCC">Try to maintain good contrast withthe page's background color!</FONT><P><FONT FACE="Tahoma"><B>You can try a funky font,but if the client browser doesn't support it, your page may not look sogreat.</FONT></B>width: 50%; height: auto; background: silver;">...</P>
Figure 9-20

Figure 9-20. An absolutely positioned paragraph

The paragraph is now positioned at the very beginning of the document, half as wide as the document's width and overwriting the first few elements!

In addition, if the document is scrolled, the paragraph will scroll right along with it. This is because the element's containing block is the BODY element's content area, not the viewport. If you want to position elements so that