Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 18th of March 2018 02:57:40 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;}
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

Another solution is to set the styles such that lines are no tallerthan absolutely necessary to hold their content. This is where youmight use a line-height of1.0. This value will multiply itself by everyfont-size to get the same value as thefont-size of every element. Thus, for everyelement, the inline box will be the same as the contentarea.

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

XML enables interoperability

All of the advantages of XML outlined so far all make interoperability possible. This is one of the most important requirements for XML, to enable disparate systems to be able to share information easily.

By taking the lowest common denominator approach, by being web enabled, protocol independent, network independent, platform independent and extensible, XML makes it possible for new systems and old systems (that are all different) to communicate with each other. Encoding information in plain text with tags is better than using propietary and platform dependent binary formats.


red. If, on the other hand, you wished to create apale red color, then you would want to raise the other two values:

H1 {color: rgb(75%,50%,50%);}

The easiest way to visualize how these percentages correspond tocolor is to create a table of gray values. Besides, grayscaleprinting is all we can afford for this book, so that's whatwe'll have to do:

Figure 3-1 shows what the various percentage values

We can see in Figure 7-18 that the paragraph has been pulled up so far that it's practically overlapping the end of the previous paragraph. This is the expected effect.

Figure 7-18

Figure 7-18. Negative top margin

In a like manner, setting a negative value on the other sides will pull them beyond their normal limits:

<P STYLE="margin: -2em; font-weight: bold;">...

As Figure 7-19 makes abundantly clear, the paragraph

9.3. Absolute Positioning

Sincemost of the examples and figures in the chapter (besides the previoussection) have been examples of absolute positioning, we'realready halfway to an understanding of how it works. Most of whatremain are the details of what happens when absolute positioning isinvoked.

When an element is positioned absolutely, it is completely removedfrom the document flow. It is then positioned with respect to its

margin: top right bottom left
Figure 7-8

Figure 7-8. Uneven margins

A good way to remember this pattern is to keep in mind that the fourvalues go clockwise around the element, starting from the top. Thevalues are always applied in this order, so inorder to get the effect you want, you have to arrange the valuescorrectly.


An easy way to remember the order in which sides have to be declared,