CSS Position Fixed In IE

Or, putting a bug to good use

The code samples and demos on this page are only for IE versions 7, 6 and 5.x

CSS standards specify four possible values for position: static, absolute, relative, and fixed. Fixed allows an element to stay where it is rendered while the rest of the page content scrolls. This can be used to keep a menu or table headings on screen as the user scrolls through the content of a long page or table.

Unfortunately, versions of IE before 7 don't support position fixed. They recognize the value and attempt to render an element fixed, but the implementation is so buggy that it is unworkable.

Along with the buggy implementation of position fixed is a bug in the implementation of position relative and absolute on children of an element with overflow auto or scroll. A descendant element with position absolute or relative of an element with overflow set is render as fixed. It doesn't matter how deeply nested. This bug is present in version 7 of IE; perhaps to remain compatible with old code that exploits the bug.

These demonstrations can be viewed as if they were a full page. As a full page, the CSS would be html{overflow: hidden;} and body{overflow: auto;}. Also, there is a potential use within pages for things like tables.

If you want an element to be position relative and not fixed as in these examples, style the element with overflow specified position relative.

THIS DEMO ONLY WORKS IN IE 6 & 7 (scroll down for IE5)

The menu will remain fixed in its position while the rest of the text scrolls.

Aliquam erat volutpat. Ut sit amet purus. Nullam a lectus. Duis in elit. Ut nonummy est pellentesque eros. Sed ultrices convallis nulla. Phasellus urna lorem, mattis a, luctus congue, dictum in, nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eros risus, ornare ut, ultrices vel, viverra vitae, dui. Proin consectetuer. Cras eget risus. Suspendisse tempor. Sed vehicula scelerisque eros. Quisque eu justo.

In tincidunt. Aenean quis nulla sollicitudin eros dapibus suscipit. Curabitur convallis, odio eu vestibulum fermentum, pede enim vestibulum lorem, vel porta mi est non nunc. Etiam cursus, lorem hendrerit mollis luctus, ligula odio lobortis massa, ac sagittis orci dui eget elit. Praesent fringilla tellus in justo. Integer ornare justo in mi. Donec lacinia. Sed id elit. Donec nec metus. Nulla facilisis feugiat diam. Duis posuere orci. Maecenas iaculis ligula nec leo. Vestibulum vitae ligula. Curabitur hendrerit ligula nec ante euismod hendrerit.

Quisque quis augue eu tortor fringilla tempus. Morbi felis nisi, posuere vitae, dapibus nec, fringilla in, elit. Sed id sem. Aenean nec tortor at nibh pulvinar vestibulum. Nullam volutpat, neque vitae laoreet pellentesque, mi nisi condimentum sem, in vestibulum sem nunc sed mauris. Vivamus vel risus ut leo vehicula rutrum. Aenean varius aliquam eros. Quisque nisi. Donec varius, erat eget adipiscing tempor, nisi odio elementum est, sed viverra felis velit ac libero. Nullam cursus pede id nulla. Aenean eu libero. Suspendisse et nibh. Duis sodales, nunc eget tempus viverra, nisl elit fermentum tortor, at pretium sem velit vel augue. Fusce eu tortor in ligula porta pulvinar. Nulla tellus.

    HTML for the example above and the one below.

    <div id="demo">
         <div id="menu">
             [snipped menu items]
         </div>
         <p class="note">THIS DEMO ONLY WORKS IN IE 6 &amp; 7 </p>
         <p>Aliquam ... [remaining content removed] </p>
   </div>

The demo div has the scroll bar

    CSS for IE 6 & 7

    #demo {
        height: 200px;
        overflow: auto;
    }
    #menu{
        position: relative;
    }

    The cosmetic styles are removed for clarity.

| | | | | | |

THIS DEMO WORKS IN IE 7, 6 and 5.x

    CSS for IE 5.x

    #demo2 {
        height: 200px;
        overflow: auto;
    }
    #menu{
        position: relative;
        top: expression(this.offsetParent.scrollTop + 'px');
    }

    The cosmetic styles are removed for clarity.

This method works well with pages that are otherwise free of CSS positioning. Here are some problems:

Caveat This method relies on a bug rather than an intended feature or the logical results of properly implemented code. Therefore, it's use has some risk. Consequently, code must be tested rigorously.

The use of CSS positioning in any descendant of an element with overflow specified will be fixed. To prevent this position the element with overflow relative.
Because we're relying on a bug, by definition it will be unpredicable in some circumstances.
Patches and upgrades can break your pages.
There is no cross-browser compatibility. Although, position fixed works in other browsers, and code can be written to select suitable style sheets.