This is an example of an element with position: fixed; applied to it, for this blog's article on the CSS property.

As background-attachment: fixed is to background images, position: fixed is to elements: it allows an element to be fixed in position on the page, allowing the rest of the page content to scroll past it. It is usually (but not exclusively) applied to divs, and is part of the “Web 2.0” aesthetic: fixed headers and footers, for example. As with elements positioned absolute, ordinary static content will scroll underneath any fixed content.

One example is a “pull tab” on the side of the page, which keeps content out of the way until needed. (I have added a CSS3 effect for modern browsers.)

While I will leave the interactivity of such a feature to another article, positioning the tab itself is very easy. The markup would be:

1. <div id=”fixed-pull-tab”>
2. <img src=”assets/images/red-tab.png” style=”float: right” alt=”LEVI’S”
3. title=”LEVI’S” />
4. <p>This is an example of an element with <code>position: fixed;</code> applied
5. to it, for this blog’s article on the CSS property.</p>
6. </div>

And the associated CSS – I have used box-shadow on the image to emphasize the “layer above” nature of the fixed position div:

1. div#fixed-pull-tab { width: 300px; border: 1px solid #000;
2. padding-left: 1em; background-color: rgba(255, 255, 37, 0.7);
3. position: fixed; left: -265px; top: 200px; }
4. div#fixed-pull-tab p { margin-right: 70px; }
5. div#fixed-pull-tab img {
6. -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.33);
7. -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.33);
8. box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.33); }
9. div#fixed-pull-tab:hover { left: 0; }

As with position: absolute, position: fixed should be used carefully: the property makes it all too easy to create web page features that overlap and obscure page content.