An element styled with position:fixed is positioned at the specified coordinates relative to the browser window. The element remains at that position regardless of scrolling.

The containing block for a fixed position element is the viewport. Fixed positioning causes an element to not scroll! Fixed positioning can be used to create "frame style" layouts and it is also often used to place a "persistent" element (like navigation) on the screen and in view at all times.

As with absolute positioning, a fixed position element uses left, top, right, and bottom properties to tell the user agent to put the element box at a certain distance from one of the edges of the viewport.

Note: position:fixed does NOT work in IEWin6 or earlier although there are hacks Open in a New Window. The fixed position property does work in IE7 if the Strict DOCTYPE is used.

This Example holds the same content as the first popup example on the absolute positioning page. The difference is that now the third paragraph, which was previously styled with position:absolute, has been changed to position:fixed. As before, the space that this paragraph would occupy in the normal document flow is collapsed. The fixed position paragraph is offset 20 pixels from the top of the window and 150 pixels from the left side. Its position is relative only to the viewport. When the user scrolls to the bottom of the page, the fixed element remains in view as the user moves down the page. Everything else appears to move behind it.

Here is an elegant example of a fixed position background Open in a New Window created by Eric Meyer.