Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 16th of September 2014 11:27:29 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;
image for each bullet. In the past, the only way to achieve this sort
of effect was to fake it. Now all you need is a
list-style-image declaration.


Yes, that's really all there is to it. One simple url value, and you're putting images in for bullets, as you can see in Figure 7-81.

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.

Figure 8-50

Figure 8-50. How the inline boxes (gray) influence the height of the line box

However, it is precisely the inline boxes which determine the heightof the overall line box. The line box is defined to be the distancefrom the top of the highest inline box in the line to the bottom ofthe lowest inline box, as illustrated by Figure 8-51.

Figure 8-51

Figure 8-51. Stacking the line boxes together

Then the top of the line box is placed against the bottom of the linebox for the preceding line. This will give us a paragraph as shown in

padding-top, padding-right, padding-bottom, padding-left


<length> | <percentage>

Initial value
of #808000, and the appropriate entry in the table is left blank.

You may recall the earlier discussion about how colors aren't always the same across different operating systems, user agents, and so forth. There is one way to partially beat this problem, although once again it means restricting your color choices. There is a set of 216 colors that are considered "web-safe," which means theyonly to HTML documents, or to any other document that uses a languagethat includes the concepts of class and ID. Other languages, such asthose based on XML, might not honor these conventions, in which caseyou'll need to use the attribute selectors instead. Matching hyphenated values

The last type of attribute selector is

Figure 9-2

Figure 9-2. Positioning an element within its containing block

Note that the positioned element has padding, a double border, and aslightly different background color. In Figure 9-2,it has no margins, but if it did, they would create blank spacebetween the borders and the offset edges. This would make thepositioned element appear as though it did not completely fill thelower-right quarter of the containing block. In truth, it would doso, but this would not be immediately apparent to the eye. In otherwords, the following two sets of styles would have the same visual