COM271, Week 6

Fixed positioning

Syllabus | Table of Pages | Assignments | References and Useful Links

Fixed positioning for page elements: CSS positioning uses the position attribute and offsets top (or bottom) and left (or right). Positioning is normally done within the context of the page or of a previously positioned containing element. (See Static, relative, and absolute positioning) Position:fixed is the exception.

The column at the left is positioned using the value fixed. Its positioning context is the screen, not the page. The page may be scrolled (I have added 500 pixels padding to the bottom of the last paragraph to permit you to scroll), but the column will not move. On most monitors at most resolutions (say, 19inch, 1280 x 1024 pixels), the bottom of the column will not be visible or accessible. This will not make users happy. Restrict use of fixed positioning for page elements to those that are small enough that they could normally be expected to appear in their entirety in a small (14in) monitor.

Fixed positioning of background images: A more common and useful fixed positioning is to set a background image such that the screen may be scrolled while the image remains in place.

In general, fixed positioned backgrounds should be done reluctantly and with care. The primary consideration is to balance any gains in overall aesthetic pleasantry against possible distraction, with particular attention to concern for visual readability. That is, text over a background image should not cause the reader to suffer eye strain or to experience difficulty in reading the text. The background should be relatively plain, without sharp lines that would interfere with seeing the sharp shapes of letters. It should also provide a wide contrast in color or darkness, making it possible for visually impaired (e.g., the 7% of the population that is "color blind") to read with ease. Techniques for accomplishing this are covered elsewhere (see Syllabus, week 6, for works in progress)