Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 29th of July 2016 11:37:59 PM

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


that if not for the margins, the line may have broken after"text" instead of after "boldfaced." This isthe only real way in which margins affect
line-breaking.

To understand why, let's go back to the paper-and-plasticanalogy employed in the previous section. Think of an inline elementas a strip of paper with marginal plastic surrounding it. Displayingthe inline element on multiple lines is like cutting up the stripinto smaller strips. However, no extra plastic is added to eachsmaller strip. The only plastic used is that which was on the strip


Library Navigation Links

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

Since the "tall" text has equal values forfont-size and line-height, itscontent height and inline box are the same thing. However, considerthis:

<P STYLE="font-size: 12px; line-height: 12px;">This is text, <EM>some of which is emphasized</EM>, plus other text<BR>which is <B STYLE="font-size: 24px;">boldfaced</B>and <SPAN STYLE="vertical-align: top; line-height: 4px;">tall</SPAN>and which is<BR>

By using negative values, it is possible to position an element outside its containing block. For example, the following values will lead to the result shown in Figure 9-3:

top: -5em; bottom: 50%; left: 75%; right: -3em;
Figure 9-3

Figure 9-3. Positioning an element beyond its containing block

Now let's see why leaving out width and height isn't always a bad thing in positioning, as well as how declaring them can work to your advantage.