Fixed Positioning | Cascading Style Sheets: Designing for the Web (3rd Edition)

Sometimes, it is desirable to keep an element onscreen at all times. For example, a short warning or a logo could be kept in the corner of the window at all times, no matter how the user scrolls the document. Similarly, when a document is printed, such an element may be printed in a fixed position on every page.

The containing block for a fixed element is thus always the viewport (i.e.,, the browser's window) or the page box (see Chapter 12, "Printing and other media"). The positioning properties set the distance between the edges of the containing block and the element. If the element is not an image or other "replaced element," you typically set the width property, and either the left or right property, and of course, top or bottom. The height can usually be left unspecified (auto). For replaced elements, you don't have to set the width unless you want to scale the image. Setting both left and right, and leaving width as auto is also possible: The width will then be calculated as the width of the viewport minus the left and right values.

The following document puts a small DIV along the left side of the window. Note that the left margin of the document has been made wide enough that the fixed element does not obscure any text:

 <HTML>   <STYLE>   BODY { margin-left: 5em }   DIV.status { position: fixed;     top: 10%; left: 0; width: 4em }   </STYLE>   ...   <DIV >     <P><IMG src="/books/2/664/1/html/2/logo" ALT="logo">     <P>Draft!   </DIV>   ... </HTML>

If this document is printed, the logo and the text "Draft!" will appear in the left margin, 10 percent from the top on every page. Of course, when you want it to appear somewhere else on paper than onscreen, or you don't want it to repeat on paper, you can use the @media rules (see Chapter 12).

Another way in which fixed positioning can be used is to divide a document into a small number of parts, each of which is displayed in one area of the viewport. For example, the following document with four DIVs can be displayed in such a way that each DIV takes up one quarter of the screen. If the contents of the DIVs is too large, scroll bars will appear (see Figure 9.5).

Figure 9.5. A window divided into four areas by means of fixed positioning.

 <HTML>   <STYLE>     DIV.one, DIV.two, DIV.three, DIV.four {       position: fixed; width: 50%; height: 50% }     DIV.one { top: 0; left: 0 }     DIV.two { top: 0; left: 50% }     DIV.three { top: 50%; left: 0 }     DIV.four { top: 50%; left: 50% }   </STYLE>   <BODY>     <DIV CLASS=one>... </DIV>     <DIV CLASS=two>... </DIV>     <DIV CLASS=three>... </DIV>     <DIV CLASS=four>... </DIV>   </BODY> </HTML>

This is similar to what can be achieved with HTML frames, but the difference is that, in this case, the entire document is in one piece (which means a quicker display and avoids problems with the Back button) and the "frames" can be positioned more freely; they can even overlap.