Affixing an Element to the Browser Window

Best javascript editor debugger Ajax website
↑

Main Page

Affixing an Element to the Browser Window

When a visitor scrolls in the browser window, the contents of the window usually move up or down while the Back and Forward buttons, for example, stay stationary or fixed. CSS allows you to affix elements to the browser window so that they don't move when the visitor scrolls up or down.

To affix an element to the browser window:

1.	Type `position: fixed;` (don't forget the semicolon; the space is optional). Figure 11.33. We'll make a momentary digression to show a fixed element, in this case the sidebar. IE needs its width expressed explicitly. In the (X)HTML, I removed the main, wrap, and header divs, since they don't make sense with a fixed element. I also moved the sidebar in front of the main div. We won't use this CSS with the rest of the example in this chapter.
2.	If desired, type `top`, `right`, `bottom`, or `left`. Then, type `:v`, where v is the desired distance that you want to offset the element from the edges of the browser window, either expressed as an absolute or relative value (10px, or 2em, for example), or as a percentage of the browser window.
3.	If desired, repeat step 2 for additional directions, separating each property/ value pair with a semicolon as usual.
4.	Use the `width` property (see page 174) to explicitly set the width of the element.

Figure 11.34. A fixed element lets other elements flow right over it. In addition, it doesn't move when the visitor scrolls through the page.

[View full size image]

Tips

Remember that the offsets of a fixed element are relative to the browser window, while the offsets of an element positioned absolutely are relative to that element's positioned ancestor.
Unfortunately, Explorer for Windows (up to and including version 6) did not support fixed positioning. IE 7 does. Firefox and Opera have for some time.
Positioning is not inherited.

Figure 11.35. Notice how the sidebar remains immobile as the visitor scrolls through the left content.

[View full size image]

Best javascript editor debugger Ajax website
→