Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 01st of May 2016 06:10:49 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;}
Figure 6-37

Figure 6-37. Placing the background image in the top right corner of the browser window

If only one keyword appears, then the other is assumed to becenter. Table 6-1 showsequivalent keyword statements.

Table 6-1. Position Keyword Equivalents

6.2.3.2. Percentage values

Closely related to the keywords arepercentage values, although they behave in a rather interesting way. 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.


PreviousHomeNext
9.3. Absolute PositioningBook Index9.5. Stacking Positioned Elements

Library Navigation Links

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

Figure 7-62

Figure 7-62. Padding problems in Navigator 4

This may be an interesting effect, but it isn't permissibleunder the CSS specification, and no other browser will do the samething, so it's best to avoid this altogether.

Even worse, if you try applying padding to inline elements inNavigator 4.x, you get a huge mess. The same sorts of things thathappen when you apply margins to inline elements will happen if youapply padding, so it is wise to avoid setting margins, borders, orpadding on inline elements.P {font-size: 18pt; line-height: 27pt;}BIG {font-size: 250%; line-height: 1em;}<P>This paragraph's 'font-size' is 18pt, and the 'line-height' for thisparagraph is 27pt. A <BIG>larger element</BIG> within the paragraph doesnot cause the line's height to change, but setting its 'line-height' does,which leads to some interesting effects.</P>

Figure 4-28

Figure 4-28. Changing the line-height of an inline element

Setting a line-height of 1emfor the BIG element will actually cause itsline-height to be the same size as the available, it is not assigned to 500.

A user agent has to do even more work if there are less than nine weights in a given font family. In this case, it has to fill in the gaps in a predetermined way: