Introduction

This is a test of a document that has a fixed

Introduction Fixed Positioning Conclusion

element along the top edge of the document. Notice that as the document scrolls the fixed element doesn't move, because the fixed element is attached to the viewport.

This example is very different from the next example which uses fixed positioning to create a frame-like presentation. This example shows how you could use fixed positioning to create a quick table of contents.

Some of the other things this test shows are the use of margin, border, and padding on the HTML element. It also shows scrolling of the viewport: because the document's initial containing block (HTML element) is larger than the viewport, there's a vertical scrollbar. It's the viewport that's scrolling, not the HTML element which is growing to accomodate the document's content.

This is loosely modeled after one of the tests in Ian Hickson's Evil Test Suite.

Fixed Positioning

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.

For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images. For paged media, boxes with fixed positions are repeated on every page.

Conclusion

There are plenty of interesting things you can do with fixed positioning. This example shows a fixed header, and the next example shows a frame-like presentation.